我想做什么LOOKS简单,但我似乎无法弄清楚如何做到这一点.
正如你在图像中看到的那样,有几条红线穿过底部,然后向右弯曲,靠近右边.
CSS有没有办法画一条这样的行？
解决方法
您可以通过使用偏斜变换(transform：skew(Xdeg))在CSS中创建有角度的线.以下是一个示例代码段：
.shape {
height: 50px;
width: 200px;
border-bottom: 2px solid red;
border-right: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="shape"></div>
如果在下面的代码片段中使用单个元素(和几个伪元素),也可以使用一个在内容区域上方的一行和一个后面的一行：
.shape:before {
position: absolute;
bottom: -5px;
left: -5px;
content: '';
height: 50px;
width: 100%;
border-bottom: 3px solid red;
border-right: 4px solid red;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.shape:after {
position: absolute;
content: '';
bottom: -10px;
left: 0px;
height: 55px;
width: 100%;
border-bottom: 3px solid red;
border-right: 4px solid red;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
.shape {
position: relative;
height: 80px;
width: 400px;
background: whitesmoke;
}
<div class="shape"> Some text that goes within the element... </div>
