CSSの三角形はどのように機能しますか？
CSS Tricks - 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>どのようにそしてなぜそれは働きますか？
CSSトライアングル：5つの行為の悲劇
alexが言ったように 、等しい幅の境界は45度の角度で互いに突き合わせている：
上の境界線がない場合は、次のようになります。
それからあなたはそれに0の幅を与えます...
...そして高さ0 ...
...そして最後に、両側の境界線を透明にします。
それは三角形になります。
境界線は交差する角のあるエッジを使用します（幅が等しい境界線では45度の角度ですが、境界線の幅を変更すると角度が歪むことがあります）。
jsFiddle 。
特定の境界線を非表示にすることで、三角形の効果を得ることができます（上記のように、異なる部分を異なる色にすることで確認できます）。 transparentは、三角形を実現するためのエッジカラーとしてよく使用されます。
基本的な正方形と境界線から始めます。それぞれの境界線は異なる色になりますので、区別することができます。
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 200px 200px 200px 200px;
height: 0px;
width: 0px;
}
これはあなたに this を与える：
しかし上の境界線は必要ないので、その幅を0pxに設定します。ボーダーボトムの200pxは三角形の200pxの高さになります。
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
そして this を取得します。
次に、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;
}
最後に this を取得します。
別のアプローチ：
CSS3三角形回転変換あり
三角形の形状は、この手法を使用して簡単に作成できます。ここでこのテクニックがどのように機能するかを説明するアニメーションを見たいと思う人にとっては：
- ANIMATION： CSS3三角形の作り方へのリンク。
- そしてDEMO： CSS3trianglesは変換回転で作成されました。
それ以外の場合、ここでは、1つの要素で二等辺直角三角形を作成する方法の4つの行為（これは悲劇ではありません）の詳細な説明です。
- 注1：二等辺三角形ではない三角形や派手なものについては、ステップ4を見ることができます。
- 注2：次のスニペットには、ベンダープレフィックスは含まれていません。 codepen demosに含まれています。
- 注3：次の説明のHTMLは常に：
<div class="tr"></div>
ステップ1： divを作成
簡単に、width = 1.41 x heightを確認してください。アスペクト比を維持し、反応する三角形を作成するために、パーセンテージとpadding-bottomの使用を含む、任意の技術（ こちらを参照 ）を使用できます。次の画像では、divには金色の黄色の境界線があります。
そのdivにpseudo elementを挿入し、親の幅と高さを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;
}
STEP 2：回転しましょう
まず、最も重要なのは、変換元を定義です。 デフォルトのOrigin は擬似要素の中央にあり、左下に必要です。これをCSSを擬似要素に追加することにより：
transform-Origin:0 100%;またはtransform-Origin: left bottom;
transform : rotate(45deg);で擬似要素を時計回りに45度回転できます
この時点で、これがあります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);
}
ステップ3：非表示
疑似要素の不要な部分（divが黄色の境界線であふれるすべて）を非表示にするには、コンテナにoverflow:hidden;を設定するだけです。黄色の境界線を削除すると、...[_ triangle _！ ：
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);
}
ステップ4：さらに進む...
demo に示すように、三角形をカスタマイズできます：
skewX()で遊んで、それらをより薄くまたはより平らにします。- 変換元および回転方向で遊んで、それらが左、右、または他の方向を指すようにします。
- 3D変換プロパティで いくらかの反射 を作成します。
- 三角形の境界線 を与える
- 画像を置く 三角形の内側
- さらに...CSS3の力を解き放ちます！
なぜこの手法を使用するのですか？
- 三角形は簡単に反応することができます。
- ボーダー付きの三角形 を作成できます。
- 三角形の境界を維持できます。これは、カーソルが三角形内の場合にのみ、ホバー状態またはクリックイベントをトリガーできることを意味します。これは this one のようないくつかの状況で非常に便利になります。各三角形は隣同士をオーバーレイできないため、各三角形は独自のホバー状態を持ちます。
- 反射のような派手な効果 を作成できます。
- 2Dおよび3D変換プロパティを理解するのに役立ちます。
なぜこのテクニックを使用しないのですか？
これがJSFiddleの アニメーションです。 デモ用に作成しました。
下記のスニペットも参照してください。
これはScreencastから作られたアニメーション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は150 x 150ピクセルの寸法で、境界は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辺すべての境界色を変えました。画像が添付されています。
STEP：3 JSfiddleリンク：
#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;
}
今私はちょうど150ピクセルからゼロにdivの高さと幅を変更しました。画像が添付されています
ステップ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エンティティと同じくらい簡単な解決策を忘れないでください。
▲
結果：
▲
参照してください： 上下の三角形のHTMLエンティティは何ですか？
下の三角形を考えてください
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
これが私たちに与えられたものです。
どうしてこんな形で出てきたの？下の図は寸法を説明しています。下の境界線には15ピクセル、左右には10ピクセルが使用されています。
右ボーダーを削除することによっても直角三角形を作ることはかなり簡単です。
さらに一歩踏み出して、これに基づいて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 です。
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つの画像のすべての手順を確認するための画像シーケンスを作成しました。
これは古い質問ですが、この三角法を使って矢印を作成する方法を共有することは価値があると思います。
ステップ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
今度は、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のclip-path
これは私がこの質問を逃したと感じるものです。 clip-path
一言で言えば
clip-path
clip-pathプロパティを使用したクリッピングは、長方形の一枚の紙から形（円形や五角形など）を切り取るのと同じです。このプロパティは“ CSS Masking Module Level 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をよりよく理解し、そしてあなた自身のものを作り始めるのを助けるために、ここにいくつかの役に立つリソースと材料があります。
SASS（SCSS）トライアングルミックスイン
私は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);
}
遊び場ページ
重要な注意：
一部のブラウザで三角形がピクセル化のように見える場合は、 ここ に記載されている方法のいずれかを試してください。
ほとんどすべての答えはborderを使って作られた三角形に焦点を当てているので、（ @lima_fil の答えから始めたように）linear-gradientメソッドを詳しく説明します。
45°のような度数の値を使うことは私たちが望む三角形を得るためにheight/widthの特定の比率を尊重することを強制するでしょう、そしてこれは反応しません：
.tri {
width:100px;
height:100px;
background:linear-gradient(45deg, transparent 50%,red 0);
/*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などの定義済みのdirection値を考慮する必要があります。この場合、応答性を保ちながら、あらゆる種類の三角形を取得できます。
1）長方形の三角形
このような三角形を取得するには、to bottom right、to top left、to bottom leftなどのような1つの線形勾配と斜め方向が必要です。
.tri-1,.tri-2 {
display:inline-block;
width:100px;
height:100px;
background:linear-gradient(to bottom left, transparent 49.8%,red 50%);
border:1px solid;
animation:change 2s linear infinite alternate;
}
.tri-2 {
background:linear-gradient(to top right, transparent 49.8%,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.8%,red 50%),
linear-gradient(to bottom left, transparent 49.8%,red 50%);
background-size:50.5% 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）。
g1とg2という2つのグラデーションがあります。青い線はdivwの幅で、各グラデーションはその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.8%,red 50%),
linear-gradient(to bottom left, transparent 49.8%,red 50%);
background-size:calc(var(--w)/2 + 0.5%) 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の高さを制御し、gradientの構文を簡単にすることです。
.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）ランダムトライアングル
ランダムな三角形を取得するには、各BUTの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とhg2をグラデーションの高さ（両方とも赤い線と同じ）として定義し、次にwg1とwg2をグラデーションの幅（wg1 + 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 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
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));
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: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>他の人たちはすでにこれをよく説明しています。 animation これをすぐに説明します： 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;
}
これは別のフィドルです。
.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;
}