CSS/HTMLのみを使用してピラミッド形状を作成する

Question

CSSでピラミッドのような形状を作成しようとしています。 私はインターネット上で読んでいる方法でそれをやっています。Divの幅を0ピクセルに設定すると、ボーダーは4つの三角形を作成するようになります。しかし、私はピラミッドの尖った先端を削除/カットしたいので、私はそれを行うことができませんでした。私は他のDIVとヒントを隠そうとしましたが、それは正しく見えません。

現在の形状： 以下は私がこれまで行ってきたものです。

必須形状：私はしたい何 は、このような形状である：ここでは

は私のコードです：

#pyramid { 
 
    width: 0px; 
 
    border-left: 20px dotted transparent; 
 
    border-right: 20px solid transparent; 
 
    border-bottom: 50px solid blue; 
 
}

<div id="pyramid"></div>

Answer 1

divに任意の幅を追加すると、そのトリックが実行されます。そうすることで、実際には3つの接続された図形があります：間に2つの三角形と1つの長方形。

#pyramid { 
 
    width: 5px; 
 
    border-left: 20px dotted transparent; 
 
    border-right: 20px solid transparent; 
 
    border-bottom: 50px solid blue; 
 
}

<div id="pyramid"></div>

Answer 2

あなたは、私がの上端に小さな白い三角形を配置したこの

.pyramid { 
 
    width: 25px; 
 
    height: 50px; 
 
    background: blue; 
 
    margin: 20px 100px; 
 
    transform: perspective(6px) rotateX(11deg); 
 
}

<div class="pyramid "></div>

Answer 3

のような形状を作成するためにperspective()とrotateX()を使用することができますビッグブルートライアングル

ここで

.triangle { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-style: solid; 
 
\t border-width: 0 50px 150px 50px; 
 
\t border-color: transparent transparent #007bff transparent; 
 
\t position: relative; 
 
} 
 
.triangle::after { 
 
\t content: ""; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-style: solid; 
 
\t border-width: 0 5px 10px 5px; 
 
\t border-color: transparent transparent #fff transparent; 
 
\t position: absolute; 
 
\t top: -1px; 
 
\t left: -5px; 
 
}

<div class="triangle"> </div>

あなたはthis online APP

を使用して簡単に生成することができます the link to css traingle from CSS-Trick.com

エルス

です