在CSS中绘制有角度的线 [英] Drawing angled lines in CSS

问题描述

我试图做的LOOKS简单，但我似乎不知道如何做。

正如你可以看到在我的形象

在CSS中有一种方法来绘制一条这样的线？ / p>

解决方案

您可以使用倾斜变换（ 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 = >在元素中的一些文本...< / div>  

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?

解决方案

You can create angled lines in CSS by using skew transforms (transform: skew(Xdeg)). Below is a sample snippet:

.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>

这篇关于在CSS中绘制有角度的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！