在 CSS 中绘制斜线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29982414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing angled lines in CSS
提问by Sherwin Flight
What I'm trying to do LOOKS simple, but I can't seem to figure out how to do it.
我想要做的事情看起来很简单，但我似乎无法弄清楚如何去做。
As you can see in my image there are a couple of red lines that go across the bottom, then bend upwards close to the right side.
正如你在我的图片中看到的，有几条红线穿过底部，然后向上弯曲靠近右侧。
Is there a way in CSS to draw a line like this?
CSS中有没有办法画这样的线？
回答by Harry
You can create angled lines in CSS by using skew transforms (transform: skew(Xdeg)). Below is a sample snippet:
您可以使用倾斜变换 ( 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>Double line with one above the content area and one behind it can also be done using a single element (and a couple of pseudos) like in the below snippet:
也可以使用单个元素（和几个伪元素）来完成，一个在内容区域上方，一个在内容区域后面的双线，如下面的代码片段所示：
.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>