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>レンダリング:
さて、効果が達成されました。今すぐ誰もがそれを達成する方法を知っているはずです、それは実際には非常に簡単です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
