純粋な CSS を使用して三角形 (さまざまな角度) を描画する_Basic チュートリアル

私たちの Web ページのスタイルは CSS のおかげで常に変化しています。この一見シンプルなスタイル言語は非常に柔軟に使用でき、創造性を発揮する限り、想像を絶する多くの効果を実現できます。特に CSS3 の普及により、より斬新な CSS 作品が登場しています。

今日は CSS 三角形の描画方法をお届けします。

コードをコピー コードは次のとおりです。

#triangle-up {
width: 0;
height: 0; border-left: 50px 単色透明;
border-right: 50px 単色透明;
border-bottom: 100px 単色赤;
}

コードをコピー コードは次のとおりです。

#triangle-down {
width: 0;
height: 0;
border-left: 50px 単色透明;
border-right : 50 ピクセルの透明なソリッド;
ボーダートップ: 100 ピクセルのソリッドな赤;
}

コードをコピー コードは次のとおりです。

#triangle-left {
width: 0;
height: 0;
border -上: 50 ピクセルの透明な実線;
右の境界線: 100 ピクセルの赤の実線;
境界の下: 50 ピクセルの透明な実線;
}

コードをコピー コードは次のとおりです。

#triangle-right {
width: 0;
height: 0;
border -上: 50 ピクセルの透明な実線;
境界左: 100 ピクセルの赤の実線;
境界の下: 50 ピクセルの透明な実線;
}

复制代代码如下:

#triangle-topleft {
幅: 0;
高さ: 0;
border-top: 100 ピクセルの赤一色;
border-right: 100 ピクセルの透明な一色;
}

复制代 代码如下:

#triangle-topright {
幅: 0;
高さ: 0;
border-top: 100 ピクセルの赤一色;
border-left: 100 ピクセルの赤一色;
}

复制代代幣如下:

#triangle-bottomleft {
幅: 0;
高さ: 0;
border-bottom: 100 ピクセルの赤一色;
border-right: 100 ピクセルの透明な一色;
}

复制代代幣如下:

#triangle-bottomright {
幅: 0;
高さ: 0;
border-bottom: 100 ピクセルの赤一色;
border-left: 100 ピクセルの透明な一色;
}