技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS3 を使用して三角形を描画するには、要素の境界線プロパティと透明境界線プロパティを使用してこれを実現できます。簡単なコード例を次に示します。

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明，控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明，控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色，控制三角形的底边 */
}

この例では、幅 0、高さ 0 の要素を作成し、三角形の左斜辺、右斜辺、底辺を制御する 3 つの境界線を設定します。境界線の幅と色を調整することで、さまざまなスタイルの三角形を描くことができます。

たとえば、上記のコードを HTML 要素に適用できます。

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

これにより、ページ上に三角形が表示されます。