css折角的简单实现 真实项目实践

这么久以来，第一次用了折角的效果，哈哈。 先来看下这个 折角的效果图：

 直接上代码：

关键代码：
<style>
        .wu{
             color: #fff;
             background:linear-gradient(-135deg, #EDEDED 2em,#cccccc 0) !important;
             position: relative;
           }

        /******
            #EDEDED  这个颜色指的是三角形的区域背景颜色
            #cccccc  指没被折角的区域
         */

</style>

<div class="conten-item wu">
      <div style="border-bottom: 0.5px solid #E5E5E5;" class="pf">下午</div>
      <div class="pf">
            <span style="font-size:14px">剩余号源:</span> <span style="font-size:20px;  
                padding-left: 5px;" >0
             </span>
       </div>
       <span style="position: absolute;top: 3px;right: 6px;font-size: 12px;
            color: #FF2D69;">满
       </span>
</div>

 background:linear-gradient(-135deg, #EDEDED 2em,#cccccc 0) !important;

#EDEDED  这个颜色指的是三角形的区域背景颜色

#cccccc  指没被折角的区域