1. 国境の原則
border 属性の値を大きくすると、ボックスの境界線が実際には三角形で構成されていることがわかります。
<style>
.triangle{
width: 0;
height: 0;
/*边框大小*/
border: 100px solid;
/*边框颜色*/
border-color: red orange yellow green;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
レンダリング:
2. 異なる向きの直角二等辺三角形
境界線の色を透明に設定するには、transparent プロパティを使用します。
(1) 下向きの三角形:
.triangle{
width: 0;
height: 0;
/*边框大小、样式、颜色透明*/
border:100px solid transparent;
/*上边框颜色*/
border-top-color: red;
}
レンダリング:
(2) 右への三角形の方向
.triangle{
width: 0;
height: 0;
border:100px solid transparent;
border-left-color: orange;
}
エフェクト画像:
(3) 上向きの三角形:
.triangle{
width: 0;
height: 0;
border:100px solid transparent;
border-bottom-color: green;
}
エフェクト画像:
(4) 左向きの三角形:
.triangle{
width: 0;
height: 0;
border:100px solid transparent;
border-right-color: yellow;
}
レンダリング:
(5)
.triangle{
width: 0;
height: 0;
/*边框大小、样式、颜色透明*/
border-top: 100px solid transparent;
border-right: 100px solid pink;
}
レンダリング:
(6)
.triangle{
width: 0;
height: 0;
/*边框大小、样式、颜色透明*/
border-left: 100px solid transparent;
border-top: 100px solid darkcyan;
}
3. 境界線ありと境界線なしの異なる三角形を設定します
(1) 上枠なし
.triangle{
width: 0;
height: 0;
/*border-top: 60px solid blue;*/
border-left:100px solid red ;
border-bottom:100px solid orange ;
border-right:100px solid greenyellow ;
}
レンダリング:
(2) 左枠なし
左側の境界線がありません
|
(3) 下枠なし
下枠なし
|
(4) 右枠なし
右の境界線がありません
|
(5) 左上の枠がない
.triangle{
width: 0;
height: 0;
border-bottom:100px solid orange ;
border-right:100px solid greenyellow ;
}
(6) 上下の枠線なし
右上の境界線がありません
|
(7) 左下枠なし
左下の境界線がありません
|
(8) 右下枠なし
右下の境界線がありません
|
4. 矢印を実装する
2 つの上向きの三角形を書き、そのうちの 1 つをもう 1 つに対して相対的に配置し、「矢印」スタイルだけを表示させ、この三角形の色を白に設定し、この白い三角形を使って他の三角形を隠します。 。同時に、マスキング効果を実現するには、z インデックス レベルを高く設定します。
--------1. ここではafterの疑似クラスを使用し、afterの疑似クラスに三角形を書き、背景色を赤に設定します。
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: black;
}
.triangle::after{
content: '';
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
}
初期表示:
--------2. 三角形の配置は相対配置に設定されており、その後の疑似クラス内の三角形は絶対配置に設定したいと考えています。
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: black;
/*相对定位*/
position: relative;
}
.triangle::after{
content: '';
/*绝对定位*/
position: absolute;
top: -80px;
right: -100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
}
エフェクト画像:
--------3. 疑似三角形のような背景色を白に設定し、黒い三角形の一部の領域を示すように Z インデックスを設定し、矢印のスタイルのみを維持します。
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: black;
/*相对定位*/
position: relative;
}
.triangle::after{
content: '';
/*绝对定位*/
position: absolute;
top: -80px;
right: -100px;
width: 0;
height: 0;
border: 100px solid transparent;
/*设置成白色*/
border-bottom-color: white;
/*设置层级*/
z-index: 2;
}
レンダリング:
5.中空の三角形を実現する
矢印の実装と同じように、前後の疑似クラスを使用して前後の疑似クラスに三角形を描画しますが、この三角形は他の三角形よりも小さいため、相対位置と絶対位置に大小の三角形を使用します。配置して、疑似クラスの三角形の背景色を白に設定するだけです。
--------1. 大小の三角形を描き、後の疑似クラスの三角形の方が小さい
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #0A98D5;
}
.triangle::after{
content: '';
width: 0;
height: 0;
border: 80px solid transparent;
border-bottom-color: yellow;
}
初期表示:
--------2. 相対位置と絶対位置を入力し、疑似クラス内の小さな三角形の位置を調整します。
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #0A98D5;
/*相对定位*/
position: relative;
}
.triangle::after{
content: '';
width: 0;
height: 0;
border: 80px solid transparent;
border-bottom-color: yellow;
/*绝对定位：*/
position: absolute;
top: -70px;
right: -80px;
}
現在の外観:
--------3. 疑似クラスの小さな三角形の背景色を白に設定します。
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #0A98D5;
/*相对定位*/
position: relative;
}
.triangle::after{
content: '';
width: 0;
height: 0;
border: 80px solid transparent;
/*更改背景颜色为白色*/
border-bottom-color: white;
/*绝对定位：*/
position: absolute;
top: -70px;
right: -80px;
}
レンダリング:
