在 CSS 中绘制斜线

Question

我想做的事情看起来很简单，但我似乎不知道该怎么做。

正如您在我的图像中看到的那样，有几条红线穿过底部，然后向上弯曲靠近右侧。

CSS有没有办法画这样的线？

Answer 1

您可以使用倾斜变换 (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>

在 CSS 中绘制斜线

Drawing angled lines in CSS

css

line

css-shapes