html - div でトリッキーな形状を形成する

Question

私はcssでこの形状を実現しようとしていますが、いくつかの異なる方法で試し、オンラインで例をチェックしましたが、この形状を達成するのはちょっと難しいようです. これを行う方法を知っている人はいますか? CSSのみの手法でも可能かどうかはわかりません。

ありがとうございました！

Answer 1

はい、可能です。とても簡単です。

デモ

結果:

:

左下隅に1つの要素と疑似を使用しているため、HTMLは単純です。

<div class='shape'></div>

関連するCSS :

.shape {
  overflow: hidden; /* to hide the top right corner 
                       of the parallelogram formed by the pseudo */
  position: relative;
  width: 20em; height: 10em; /* any values really */
}
.shape:before {
  position: absolute;
  bottom: 0; left: 0;
  width: 150%; height: 150%;
  transform-origin: 0 100%;
  transform: rotate(-3deg) skewX(-10deg);
  background: black;
  content: '';
}

CSS 変換を使用して、多くの形状を取得できます。そして、それらは実際の形状であり、背後にあらゆる種類の背景を持つことができます.

Answer 2

私はそれがあなたの質問に対する完璧な解決策だと思います...

#trapezoid {
 height: 0;
 width: 120px;
 border-bottom: 80px solid #05ed08;
 border-left: 45px solid transparent;
 border-right: 5px solid transparent;
 padding: 10 8px 5 5;
}

Answer 3

:before、:after疑似、およびtransformプロパティを使用することもできます。ここに例があります。

#box {
    width: 400px;
    height: 200px;
    background-color: #212121;
    position: relative;
}

#box:after, #box:before {
    display: block;
    content: "\0020";
    color: transparent;
    width: 411px;
    height: 45px;
    background: white;
    position: absolute;
    bottom: -20px;
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
#box:before {
    bottom: 80px;
    left: -200px;
    -moz-transform: rotate(92deg);
    -webkit-transform: rotate(92deg);
    -o-transform: rotate(92deg);
    -ms-transform: rotate(92deg);
    transform: rotate(92deg);
}

必要な形状を得るには、いくつかの値を変更する必要がある場合があります。