css border_html/css_WEB-ITnoseで実装した三角パターン

CSS におけるボーダーの役割は誰もが知っていると思いますが、CSS ボーダーで三角形パターンを実装する方法を知らない人も多いでしょう。この記事では、CSSボーダーを使ってカラフルな三角形のパターンを実現する方法を紹介します。

CSS を使用して境界線の境界線属性を制御します。三角形を描くことができます。以下は段階的なデモです:

まず次のコードを見てください:

<style>div{    width:200px;    height:200px;    border-top:50px solid yellow;    border-right:50px solid red;    border-bottom:50px solid purple;    border-left:50px solid blue;}</style><div></div>

効果は次のとおりです。次のとおりです:

もしそうするなら、idth と height が 0 に設定されている場合はどうなるでしょうか:

<style>div{    width:0px;    height:0px;    border-top:50px solid yellow;    border-right:50px solid red;    border-bottom:50px solid purple;    border-left:50px solid blue;}</style><div></div>

レンダリングは次のとおりです:

写真からわかるように、すでに 4 つあります。三角形が 1 つだけ必要な場合、これを実現するにはどうすればよいでしょうか。非常に簡単で、他の 3 つの境界線の色を透明に設定するだけです。

コードは次のとおりです:

<style>div{    width:0px;    height:0px;    border-top:50px solid transparent;    border-right:50px solid transparent;    border-bottom:50px solid transparent;    border-left:50px solid blue;}</style><div></div>

レンダリング:

さて、効果が達成されました。今すぐ誰もがそれを達成する方法を知っているはずです、それは実際には非常に簡単です。