CSSトリックにはさまざまなCSSの形がたくさんあります-CSSの形と私は特に三角形に戸惑っています：
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<div id="triangle-up"></div>どのようにそしてなぜそれは機能しますか？
アレックスが言ったように、同じ幅の境界線は45度の角度で互いに突き合わされます。
上枠がない場合は、次のようになります。
次に、幅を0にします。
...そして高さ0..。
...そして最後に、2つの側面の境界線を透明にします。
その結果、三角形になります。
境界線は、交差する場所で角度の付いたエッジを使用します（45°の角度で同じ幅の境界線を使用しますが、境界線の幅を変更すると角度が歪む可能性があります）。
div {
width: 60px;
border-width: 30px;
border-color: red blue green yellow;
border-style: solid;
}<div></div>jsFiddleをご覧ください。
特定の境界線を非表示にすることで、三角形の効果を得ることができます（上記のように、さまざまな部分を異なる色にすることでわかります）。transparent三角形を実現するためのエッジカラーとしてよく使用されます。
基本的な正方形と境界線から始めます。境界線ごとに異なる色が付けられるため、境界線を区別できます。
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 200px 200px 200px 200px;
height: 0px;
width: 0px;
}<div class="triangle"></div>これはあなたにこれを与えます：
ただし、上部の境界線は必要ないため、幅を。に設定し0pxます。これで、border-bottomの200px三角形の高さが200pxになります。
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}<div class="triangle"></div>そして私たちはこれを手に入れます：
次に、2つの辺の三角形を非表示にするには、border-colorをtransparentに設定します。上部の境界線が効果的に削除されているため、border-top-colorを透明に設定することもできます。
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}<div class="triangle"></div>最後にこれを取得します：
この手法を使用すると、三角形の形状を非常に簡単に作成できます。このテクニックがここでどのように機能するかを説明するアニメーションを見たい人にとっては、次のとおりです。
それ以外の場合は、1つの要素で二等辺直角三角形を作成する方法の4つの行為（これは悲劇ではありません）の詳細な説明です。
<div class="tr"></div>簡単です。必ず確認してwidth = 1.41 x heightください。アスペクト比を維持し、応答性の高い三角形を作成するために、パーセンテージやパディングボトムの使用を含む任意の手法（ここを参照）を使用できます。次の画像では、divに金色の黄色の境界線があります。
そのdivに、疑似要素を挿入し、親の幅と高さを100％にします。次の画像では、疑似要素の背景が青色になっています。
この時点で、このCSSがあります：
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr: before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
}
まず、最も重要なのは、変換の原点を定義することです。デフォルトの原点は疑似要素の中央にあり、左下に必要です。このCSSを疑似要素に追加することによって：
transform-origin:0 100%;またtransform-origin: left bottom;
これで、疑似要素を時計回りに45度回転できます。transform : rotate(45deg);
この時点で、このCSSがあります：
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
overflow:hidden;疑似要素の不要な部分（黄色の境界線でdivをオーバーフローするすべてのもの）を非表示にするには、コンテナーに設定する必要があります。黄色の境界線を削除すると、次のようになります...三角形！：
CSS：
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
overflow: hidden;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
デモに示されているように、三角形をカスタマイズできます。
skewX()ます。これは、デモンストレーション用に作成したJSFiddleのアニメーションです。
以下のスニペットも参照してください。
これはスクリーンキャストから作成されたアニメーションGIFです
transforms = [
{'border-left-width' :'30', 'margin-left': '70'},
{'border-bottom-width' :'80'},
{'border-right-width' :'30'},
{'border-top-width' :'0', 'margin-top': '70'},
{'width' :'0'},
{'height' :'0', 'margin-top': '120'},
{'borderLeftColor' :'transparent'},
{'borderRightColor' :'transparent'}
];
$('#a').click(function() {$('.border').trigger("click");});
(function($) {
var duration = 1000
$('.border').click(function() {
for ( var i=0; i < transforms.length; i++ ) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery)).border {
margin: 20px 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
transforms = [
{'border-left-width' :'30', 'margin-left': '70'},
{'border-bottom-width' :'80'},
{'border-right-width' :'30'},
{'border-top-width' :'0', 'margin-top': '70'},
{'width' :'0'},
{'height' :'0'},
{'borderLeftColor' :'transparent'},
{'borderRightColor' :'transparent'}
];
transforms = shuffleArray(transforms)
$('#a').click(function() {$('.border').trigger("click");});
(function($) {
var duration = 1000
$('.border').click(function() {
for ( var i=0; i < transforms.length; i++ ) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery)).border {
margin: 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>$('#a').click(function() {$('.border').trigger("click");});
(function($) {
var duration = 1000
$('.border').click(function() {
$(this)
.animate({'border-top-width': 0 ,
'border-left-width': 30 ,
'border-right-width': 30 ,
'border-bottom-width': 80 ,
'width': 0 ,
'height': 0 ,
'margin-left': 100,
'margin-top': 150,
'borderTopColor': 'transparent',
'borderRightColor': 'transparent',
'borderLeftColor': 'transparent'}, duration)
}).end()
}(jQuery)).border {
margin: 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>次のdivがあるとしましょう：
<div id="triangle" />
次に、CSSを段階的に編集して、周りで何が起こっているのかを明確に把握できるようにします。
ステップ1： JSfiddleリンク：
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid black ;
border-right: 50px solid black;
border-bottom: 50px solid black;
border-top: 50px solid black;
}
これは単純なdivです。非常にシンプルなCSSを使用します。だから素人は理解できます。Divのサイズは150x150ピクセルで、境界線は50ピクセルです。画像が添付されています：
ステップ2： JSfiddleリンク：
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
4辺すべての境界線の色を変更しました。画像を添付します。
ステップ： 3JSfiddleリンク：
#triangle {
background: purple;
width :0;
height:0;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
ここで、divの高さと幅を150ピクセルからゼロに変更しました。画像が添付されています
ステップ4： JSfiddle：
#triangle {
background: purple;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
これで、下の境界線を除いて、すべての境界線を透明にしました。下の画像を添付します。
ステップ5： JSfiddleリンク：
#triangle {
background: white;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
今、背景色を白に変更しました。画像を添付します。
したがって、必要な三角形が得られました。
そして今、完全に異なる何か...
cssトリックを使用する代わりに、htmlエンティティのような単純なソリューションを忘れないでください。
▲
結果：
▲
以下の三角形を考えてみましょう
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
これが私たちに与えられたものです：
なぜこの形で出てきたのですか？下の図は寸法を説明しています。下の境界線に15pxが使用され、左右に10pxが使用されていることに注意してください。
直角三角形を作成するのも、右の境界線を削除することで非常に簡単です。
さらに一歩進んで、これに基づいたcssを使用して、戻るボタンと次のボタンに矢印を追加しました（はい、100％クロスブラウザーではないことはわかっていますが、それでも滑らかです）。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
margin:20px auto;
}
.triangle-down {
border-bottom:none;
border-top: 100px solid red;
}
.triangle-left {
border-left:none;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
}
.triangle-right {
border-right:none;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
}
.triangle-after:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
margin:0 5px;
content:"";
display:inline-block;
}
.triangle-after-right:after {
border-right:none;
border-left: 5px solid blue;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
.triangle-before:before {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
margin:0 5px;
content:"";
display:inline-block;
}
.triangle-before-left:before {
border-left:none;
border-right: 5px solid blue;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>
<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>別のアプローチ。線形グラデーションあり（IEの場合、IE 10以降のみ）。任意の角度を使用できます。
.triangle {
margin: 50px auto;
width: 100px;
height: 100px;
/* linear gradient */
background: -moz-linear-gradient(-45deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* IE10+ */
background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* W3C */;
}<div class="triangle"></div>これがjsfiddleです
clip-pathこれは、この質問が見逃していると私が感じるものです。clip-path
clip-path一言で言えばクリッピングは、
clip-pathプロパティを使用して、長方形の紙から形状（円や五角形など）を切り取るのに似ています。このプロパティは、「<a href="https://www.w3.org/TR/css-masking-1/"rel="noreferrer">CSSマスキングモジュールレベル1」仕様に属しています。仕様には、「CSSマスキングは、視覚要素の一部を部分的または完全に非表示にするための2つの手段、マスキングとクリッピングを提供します」と記載されています。
clip-pathパラメータで指定した形状をカットするために、境界ではなく要素自体を使用します。非常にシンプルなパーセンテージベースの座標系を使用しているため、編集が非常に簡単で、数分で手に取って奇妙で素晴らしい形を作成できます。
div {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: red;
width: 100px;
height: 100px;
}<div></div>現時点では大きな欠点があります。1つはサポートが大幅に不足していることです。実際には-webkit-ブラウザでカバーされているだけで、IEはサポートされておらず、FireFoxではごく一部しかサポートされていません。
clip-pathここでは、理解を深め、独自の作成を開始するのに役立つリソースと資料をいくつか紹介します。
OK、この三角形は、要素の境界線がHTMLとCSSで連携する方法のために作成されます...
通常は1または2pxの境界線を使用するため、境界線が同じ幅で互いに45度の角度になることに気付くことはありません。幅が変わると、角度の角度も変わります。以下で作成したCSSコードを実行します。
.triangle {
width: 100px;
height: 100px;
border-left: 50px solid black;
border-right: 50px solid black;
border-bottom: 100px solid red;
}<div class="triangle">
</div>次に、次のステップでは、次のような幅や高さはありません。
.triangle {
width: 0;
height: 0;
border-left: 50px solid black;
border-right: 50px solid black;
border-bottom: 100px solid red;
}<div class="triangle">
</div>次に、左右の境界線を非表示にして、次のように望ましい三角形を作成します。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<div class="triangle"></div>スニペットを実行して手順を確認したくない場合は、1つの画像のすべての手順を確認するための画像シーケンスを作成しました。
これは古い質問ですが、この三角形の手法を使用して矢印を作成する方法を共有する価値があると思います。
2つの三角形を作成しましょう。2番目の三角形では、:after疑似クラスを使用して、もう一方のすぐ下に配置します。
.arrow{
width: 0;
height: 0;
border-radius: 50px;
display: inline-block;
position: relative;
}
.arrow:after{
content: "";
width: 0;
height: 0;
position: absolute;
}
.arrow-up{
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #333;
}
.arrow-up:after{
top: 5px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ccc;
right: -50px;
}<div class="arrow arrow-up"> </div>次に、2番目の三角形の主な境界線の色を背景の同じ色に設定する必要があります。
.arrow{
width: 0;
height: 0;
border-radius: 50px;
display: inline-block;
position: relative;
}
.arrow:after{
content: "";
width: 0;
height: 0;
position: absolute;
}
.arrow-up{
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #333;
}
.arrow-up:after{
top: 5px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #fff;
right: -50px;
}<div class="arrow arrow-up"> </div>すべての矢印をいじる：http：
//jsfiddle.net/tomsarduy/r0zksgeu/
三角形に境界線を適用する場合は、次をお読みください。CSSで三角形を作成しますか？
ほとんどすべての回答は、境界線を使用して作成された三角形に焦点を合わせているため、linear-gradientメソッドを詳しく説明します（@lima_filの回答から開始）。
のような度の値を使用すると、必要な三角形を取得するために45°の特定の比率を尊重するheight/width必要があり、これは応答しません。
.tri {
width:100px;
height:100px;
background:linear-gradient(45deg, transparent 49.5%,red 50%);
/*To illustrate*/
border:1px solid;
}Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>to bottomこれを行う代わりに、、などの事前定義された方向の値を考慮する必要がありますto top。この場合、応答性を維持しながら、あらゆる種類の三角形を取得できます。
1）長方形の三角形
このような三角形を取得するには、1つの線形勾配と、、、などの対角線方向が必要ですto bottom right。to top leftto bottom left
.tri-1,.tri-2 {
display:inline-block;
width:100px;
height:100px;
background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
border:1px solid;
animation:change 2s linear infinite alternate;
}
.tri-2 {
background:linear-gradient(to top right, transparent 49.5%,red 50%);
border:none;
}
@keyframes change {
from {
width:100px;
height:100px;
}
to {
height:50px;
width:180px;
}
}<div class="tri-1"></div>
<div class="tri-2"></div>2）二等辺三角形
これには、上記のように2つの線形グラデーションが必要であり、それぞれが幅（または高さ）の半分を取ります。これは、最初の三角形の鏡像を作成するようなものです。
.tri {
display:inline-block;
width:100px;
height:100px;
background-image:
linear-gradient(to bottom right, transparent 49.5%,red 50%),
linear-gradient(to bottom left, transparent 49.5%,red 50%);
background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
background-position:left,right;
background-repeat:no-repeat;
animation:change 2s linear infinite alternate;
}
@keyframes change {
from {
width:100px;
height:100px;
}
to {
height:50px;
width:180px;
}
}<div class="tri"></div>3）正三角形
これは、グラデーションの高さと幅の関係を維持する必要があるため、処理が少し難しいです。上記と同じ三角形になりますが、二等辺三角形を正三角形に変換するために、計算をより複雑にします。
簡単にするために、divの幅は既知であり、高さは三角形を内側に描画できるほど十分に大きいと見なします（height >= width）。
2つのグラデーションがg1ありg2、青い線はの幅でありdiv w、各グラデーションにはその50％（w/2）があり、三角形の各辺はに等しくなりwます。緑の線は両方の勾配の高さであり、hg次の式を簡単に取得できます。
(w/2)² + hg² = w²---> hg = (sqrt(3)/2) * w--->hg = 0.866 * w
calc()計算を実行し、必要な結果を取得するために信頼できます。
.tri {
--w:100px;
width:var(--w);
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 49.5%,red 50%),
linear-gradient(to bottom left, transparent 49.5%,red 50%);
background-size:calc(var(--w)/2 + 0.5px) calc(0.866 * var(--w));
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>もう1つの方法は、divの高さを制御し、グラデーションの構文を簡単に保つことです。
.tri {
--w:100px;
width:var(--w);
height:calc(0.866 * var(--w));
display:inline-block;
background:
linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
linear-gradient(to bottom left, transparent 49.8%,red 50%) right;
background-size:50.2% 100%;
background-repeat:no-repeat;
}<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>4）ランダムな三角形
ランダムな三角形を取得するには、それぞれの50％の条件を削除するだけなので簡単ですが、2つの条件を維持する必要があります（両方の高さが同じで、両方の幅の合計が100％である必要があります）。
.tri-1 {
width:100px;
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
background-size:20% 60%,80% 60%;
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}<div class="tri-1"></div>しかし、それぞれの側に値を定義したい場合はどうでしょうか。計算をやり直すだけです！
とをグラデーションの高さ（両方とも赤い線に等しい）として定義し、グラデーションの幅（）として定義しhg1ましょう。計算の詳細については説明しませんが、最後に次のようにします。hg2wg1wg2wg1 + wg2 = a
wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)
calc()これを実装できなくてもCSSの限界に達したので、最終結果を手動で収集して固定サイズとして使用する必要があります。
.tri {
--wg1: 20px;
--wg2: 60px;
--hg:30px;
width:calc(var(--wg1) + var(--wg2));
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 49.5%,red 50%),
linear-gradient(to bottom left, transparent 49.5%,red 50%);
background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}<div class="tri" ></div>
<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>ボーナス
回転やスキューを適用することもでき、より多くの三角形を取得するためのより多くのオプションがあることを忘れてはなりません。
.tri {
--wg1: 20px;
--wg2: 60px;
--hg:30px;
width:calc(var(--wg1) + var(--wg2) - 0.5px);
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 49%,red 50%),
linear-gradient(to bottom left, transparent 49%,red 50%);
background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}<div class="tri" ></div>
<div class="tri" style="transform:skewY(25deg)"></div>
<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>
<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>そしてもちろん、状況によってはより適切なSVGソリューションを念頭に置く必要があります。
svg {
width:100px;
height:100px;
}
polygon {
fill:red;
}<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>これは、CSS三角形を自動的に生成するのを簡単にする（そしてDRYする）ために作成しました。
// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
$size: $size/2;
$transparent: rgba($color, 0);
$opposite: (top:bottom, right:left, left:right, bottom:top);
content: '';
display: inline-block;
width: 0;
height: 0;
border: $size solid $transparent;
border-#{map-get($opposite, $direction)}-color: $color;
margin-#{$direction}: -$size;
}
span {
@include triangle(bottom, red, 10px);
}
重要な注意：一部のブラウザで
三角形がピクセル化されているように見える場合は、ここで説明する方法の1つを試してください。
border-sizeをいじって、それらがどのようにさまざまな形を作成できるかを確認したい場合は、次のことを試してwidthください。height
const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');
function update({ target }) {
let index = null;
if (target) {
index = parseInt(target.id);
if (!isNaN(index)) {
sizes[index] = target.value;
}
}
window.requestAnimationFrame(() => {
triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
if (isNaN(index)) {
triangle.style[target.id] = `${ target.value }px`;
}
});
}
document.querySelectorAll('input').forEach(input => {
input.oninput = update;
});
update({});body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#triangle {
border-style: solid;
border-color: yellow magenta blue black;
background: cyan;
height: 0px;
width: 0px;
}
#controls {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
display: flex;
box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}
#controls > div {
position: relative;
width: 25%;
padding: 8px;
box-sizing: border-box;
display: flex;
}
input {
margin: 0;
width: 100%;
position: relative;
}<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>
<div id="controls">
<div><input type="range" min="0" max="128" value="32" id="0" /></div>
<div><input type="range" min="0" max="128" value="32" id="1" /></div>
<div><input type="range" min="0" max="128" value="32" id="2" /></div>
<div><input type="range" min="0" max="128" value="32" id="3" /></div>
<div><input type="range" min="0" max="128" value="0" id="width" /></div>
<div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>ここに別のフィドルがあります：
.container:after {
position: absolute;
right: 0;
content: "";
margin-right:-50px;
margin-bottom: -8px;
border-width: 25px;
border-style: solid;
border-color: transparent transparent transparent #000;
width: 0;
height: 0;
z-index: 10;
-webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
bottom: 21px;
}
.container {
float: left;
margin-top: 100px;
position: relative;
width: 150px;
height: 80px;
background-color: #000;
}
.containerRed {
float: left;
margin-top: 100px;
position: relative;
width: 100px;
height: 80px;
background-color: red;
}
他の人はすでにこれをよく説明しています。これを簡単に説明するアニメーションを提供しましょう：http： //codepen.io/chriscoyier/pen/lotjh
ここに、あなたが遊んで概念を学ぶためのいくつかのコードがあります。
HTML：
<html>
<body>
<div id="border-demo">
</div>
</body>
</html>
CSS：
/*border-width is border thickness*/
#border-demo {
background: gray;
border-color: yellow blue red green;/*top right bottom left*/
border-style: solid;
border-width: 25px 25px 25px 25px;/*top right bottom left*/
height: 50px;
width: 50px;
}
これで遊んで、何が起こるか見てください。高さと幅をゼロに設定します。次に、上部の境界線を削除して左右を透明にするか、以下のコードを見てcssの三角形を作成します。
#border-demo {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
これは古いものですが、 HTMLとCSSのみを使用して三角形を作成するには、少なくとも5つの異なる方法があることをこのディスカッションに追加したいと思います。
borders linear-gradient conic-gradient transformおよびの使用
overflow clip-path方法3を除いて、すべてがここでカバーされていると思うconic-gradientので、ここで共有します。
.triangle{
width: 40px;
height: 40px;
background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
}<div class="triangle"></div>
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);簡単に三角形を作成するために使用します
<div class="triangle"></div>
.triangle{width:200px; height:200px;background:#000;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}
これを試して：-
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}<div class="triangle"></div>クリップパスは私にとって最良の結果をもたらします-固定寸法の有無にかかわらず、div/コンテナに最適です：
.triangleContainer{
position: relative;
width: 500px;
height: 500px;
}
.triangleContainer::before{
content: "";
position: absolute;
background:blue;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}