web-dev-qa-db-ja.com

CSSで斜めの線を描く

LOOKSでやろうとしていることは簡単ですが、その方法を理解できていないようです。

私の画像を見るとわかるように、下を横切る赤い線がいくつかあり、右側に向かって上に曲がっています。

CSSにこのような線を引く方法はありますか？

example showing lines

csslinecss-shapes
13
Sherwin Flight

CSSで斜めの線を作成するには、スキュー変換（transform: skew(Xdeg)）を使用します。以下はサンプルスニペットです。

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

次のスニペットのように、コンテンツ領域の上に1つ、その後ろに1つある二重線は、単一の要素（および2つの疑似要素）を使用して実行することもできます。

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