CSS Tricks- 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>

どのようにそしてなぜそれは機能しますか？

CSS Triangles：5つの行為の悲劇

アレックスは言っ、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;
}

これはあなたにこれを与えます：

ただし、上部の境界線は必要ないため、幅をに設定し0pxます。ボーダーボトムの200px三角形が200pxの高さになります。

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

これを取得します。

次に、2つの側面の三角形を非表示にするには、border-colorを透明に設定します。top-borderが効果的に削除されたので、border-top-colorを透明に設定することもできます。

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

最後にこれを取得します：

異なるアプローチ：

変換回転を伴うCSS3三角形

このテクニックを使用すると、三角形の形状を簡単に作成できます。このテクニックがここでどのように機能するかを説明するアニメーションを見るのを好む人にとっては、

• アニメーションへのリンク：CSS3三角形の作成方法。
• そしてDEMO：CSS3の三角変換回転で作られました。

それ以外の場合は、1つの要素で二等辺直角三角形を作成する方法の4つの行為（これは悲劇ではありません）の詳細な説明です。

• 注1：非二等辺三角形と派手なものについては、ステップ4を参照してください。
• 注2：次のスニペットでは、ベンダープレフィックスは含まれていません。これらはcodepenデモに含まれています。
• 注3：以下の説明のHTMLは常に： <div class="tr"></div>

ステップ1： 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;
}

STEP 2：回転しましょう

まず、最も重要なことは、変換の原点を定義することです。デフォルトの原点は、疑似要素の中心であり、我々は左下にそれを必要とします。この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);
}

ステップ3：隠す

疑似要素の不要な部分（黄色の境界線でdivをオーバーフローするすべてのもの）を非表示にするoverflow:hidden;には、コンテナーに設定する必要があります。黄色の枠を取り除いた後、三角形が表示されます。：

デモ

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：さらに進む...

デモに示されているように、三角形をカスタマイズできます。

1. で遊んで、薄くしたり平らにしたりしてくださいskewX()。
2. 変換方向と回転方向を操作して、左、右、またはその他の方向を指し示します。
3. 作成し、いくつかの反射を 3Dでプロパティを変換します。
4. 三角形のボーダーを与える
5. 三角形の中に画像を入れます
6. さらにもっと... CSS3のパワーを解き放ちます！

なぜこのテクニックを使うのですか？

1. Triangleは簡単に反応します。
2. ボーダー付きの三角形が作れます。
3. 三角形の境界を維持できます。つまり、カーソルが三角形の内側にある場合にのみ、ホバー状態またはクリックイベントをトリガーできます。これは、各三角形がその隣接要素をオーバーレイできないため、各三角形が独自のホバー状態を持っているこのような状況では、非常に便利です。
4. あなたは反射のようないくつかの派手な効果を作ることができます。
5. 2Dおよび3D変換プロパティを理解するのに役立ちます。

このテクニックを使用しないのはなぜですか？

1. 主な欠点はブラウザの互換性であり、2D変換プロパティはIE9 +でサポートされているため、IE8のサポートを計画している場合はこの手法を使用できません。詳細はCanIuseを参照してください。リフレクションブラウザーサポートのような3D変換を使用したいくつかの派手な効果はIE10 +です（詳細についてはcanIuseを参照してください）。
2. レスポンシブなものは何も必要なく、プレーントライアングルで十分です。ここで説明するボーダーテクニックを使用する必要があります。ブラウザーの互換性が向上し、ここにある驚くべき投稿のおかげで理解しやすくなります。

これは、デモ用に作成した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のサイズは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つの辺すべての境界線の色が変更されました。画像が添付されます。

ステップ：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;
}

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エンティティと同じくらい簡単なソリューションを忘れないでください。

▲

結果：

▲

参照：上向き三角形と下向き三角形の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>

OK、この三角形は、要素の境界線がHTMLとCSSで一緒に機能する方法のために作成されます...

通常1ピクセルまたは2ピクセルのボーダーを使用するため、ボーダーが同じ幅で互いに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つの画像ですべての手順を確認できるように画像シーケンスを作成しました。

別のアプローチ。線形勾配あり（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があります

CSS clip-path

これは私がこの質問を逃したと感じているものです。 clip-path

clip-path 手短に

clip-pathプロパティを使用したクリッピングは、長方形の紙から形状（円や五角形など）を切り取るのと同じです。このプロパティは、「CSSマスキングモジュールレベル1」仕様に属しています。仕様には、「CSSマスキングは、視覚要素の一部を部分的または完全に非表示にするための2つの手段：マスキングとクリッピング」を提供します。

• Smashing Magazineからの抜粋

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つはサポートが大幅に不足していること、もう1つは-webkit-ブラウザーでのみカバーされていること、IEはサポートされていないこと、FireFoxは部分的にしかサポートされていないことです。

資源

以下に、理解を深めclip-path、独自のリソースの作成を開始するのに役立つリソースと資料をいくつか示します。

• Clippy- clip-pathジェネレーター
• W3C候補の推奨ファイル
• MDN clip-pathドキュメント
• clip-path ブラウザのサポート

これは古い質問ですが、この三角形のテクニックを使用して矢印を作成する方法を共有する価値があると思います。

ステップ1：

2つの三角形を作成してみましょう。2番目の三角形では、:after擬似クラスを使用して、もう1つの三角形の下に配置します。

.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/

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);
}

遊び場ページ

重要な注意：一部のブラウザで
三角形がピクセル化されているように見える場合は、ここで説明する方法のいずれかを試してください。

^{三角形に境界線を適用する場合は、次をお読みください：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 left、to 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とhg2、その後私たちのグラデーションの高さ（両方が赤のラインに等しい）wg1とwg2私たちのグラデーションの幅と（wg1 + wg2 = a）。計算の詳細は説明しませんが、その時点で次のようになります。

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

これでCSSの制限に達しました。calc()これを実装することはできないので、最終結果を手動で収集して固定サイズとして使用する必要があるだけです。

.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>

ここに別のフィドルがあります：

.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;
}

https://jsfiddle.net/qdhvdb17/

他の人はすでにこれをうまく説明しています。これをすぐに説明するアニメーションをお見せしましょう：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;
}

あなたが周りにプレイしたい場合は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>

これを試して：-

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

私はこれが古いものであることを知っていますが、HTMLとCSSだけを使用して三角形を作成するには少なくとも5つの異なる方法があることをこの議論に付け加えたいと思います。

1. 使用する borders
2. 使用する linear-gradient
3. 使用する conic-gradient
4. 使用する transformと、overflow
5. 使用する 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>