記事ディレクトリ
I.はじめに
フロントエンド開発中、アドレス選択やプレーヤーの再生ボタンなど、三角形の形状を使用する必要がある場合があります。
svg通常、三角形のレンダリングを完成させるには、絵を使用したり、三角形のレンダリングを完成させたりしますがcss、それのみを使用する場合、三角形を完成させるにはどうすればよいでしょうか?
導入プロセスは難しくないようで、国境を越えて完了できます
2.それを達成するにはどうすればよいですか?
1. 単純な三角形を実現する
予備知識：ブロックレベル要素の幅と高さが両方とも0で、境界線のみが設定されている場合、立方体が形成されます。具体的な実装は以下の通り
div {
width: 0;
height: 0;
border: 50px solid red;
}効果は以下の通りです
基本的に、上下左右の境界線はすべて三角形なので、必要な三角形を表示し、他の 3 方向の三角形を非表示にします。
上の三角形を維持したい場合
div {
width: 0;
height: 0;
/* 排他思想，给全部的边框设置为透明 */
border: 50px solid transparent;
/* 单独给你想要的三角形设置样式 */
border-top: 100px solid red;
}効果は以下の通りです
2.中空の三角形を実現する
中空の境界線のみを持つ三角形を実現したい場合、
borderここでは属性を使用できないため、最も直接的な方法は、疑似クラスを使用して小さな三角形を作成し、それを配置することです。
(1). div に疑似クラスを追加するときは、絶対配置を使用して最初は左: 0 右: 0 に配置し、後で調整します。
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
position: relative;
}
div::after {
content: '';
border: 40px solid transparent;
border-bottom: 40px solid green;
position: absolute;
top: 0px;
left: 0px;
}初期効果は次のようになります
(2). 次に、疑似クラス要素 (緑色の三角形) の位置を調整し、境界線の下部の色を白に設定して、中央に空洞効果を実現します。
コードは以下のように表示されます
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
position: relative;
}
div::after {
content: '';
border: 40px solid transparent;
/* 将伪类元素的三角形设置为白色，达到空心的效果 */
border-bottom: 40px solid white;
position: absolute;
/* 调整伪类元素的位置 */
top: -34px;
left: -39px;
}最終的に得られる効果は以下の通りです
三つ。まとめ
以上、CSSで三角形を描画する2つの方法を実現しましたが、実際の開発でも遭遇するはずですが、フォントアイコンライブラリを使用して要件を満たすだけでなく、独自のCSSを使用して要件を実現することもできます。