美工设计的图稿右下图样式:
内发光且不说,有斜线部分,虽然切图很方便,但是因为上大屏,常常发生扭曲,没有css控制调整方便。于是写了如下代码实现:
.slopingside{
height:0px;
border: 1px solid red;
width: 45px;
transform:rotate(125deg);
-o-transform:rotate(125deg);
-moz-transform:rotate(125deg);
-webkit-transform:rotate(125deg);
}
.linear {
height:0px;
border: 1px solid red;
margin-left: 30px;
margin-top: -10px;
}
<div class="slopingside"></div>
<div class="linear"></div>
其中:125为可调整的线的度数(倾斜度)
实现效果如下图: