如何使用 CSS 实现斜线效果？

如何使用单个标签，实现下图所示的斜线效果。

image.png

CSS3 旋转缩放

这个应该属于看到需求第一眼就可以想到的方法了。

这里我们使用 伪元素 画出一条直线，然后绕 div 中心旋转 45deg ，再缩放一下就可以得到。

简单的一张流程图：

image.png

三角形实现

接下来两种方法就有点为了斜线而斜线的感觉。

利用 CSS border ，是可以轻松实现一个类似这样的三角形的

image.png

div 画线实现

image.png

<div  class="cont">
    <i icon="remove" ></i>
<div>生产需求</div>
    
  <div class="prohibit"></div>
</div>

css

.cont{width:300px;height:300px;background:#red; }
  .prohibit{
    height: 0px;
    width: 100%;
    border-top: 3px solid #F56C6C;
    transform: rotate(162deg);
    -o-transform: rotate(162deg);
    -moz-transform: rotate(162deg);
    -webkit-transform: rotate(162deg);
    position: relative;
    top: 21px;
    border-radius: 4px;
  }