CSSの三角形はどのように機能しますか?

1885
Stanislav Shabalin 2011-08-16 17:54.

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

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

20 answers

2268
sdleihssirhc 2011-08-16 18:11.

CSS Triangles:5つの行為における悲劇

アレックスは言っ、45度の角度で互いに対して等しい幅バットアップの境界:

上枠がない場合は、次のようになります。

次に、幅を0にします。

...そして高さ0 ...

...そして最後に、2つの側面の境界線を透明にします。

その結果、三角形になります。

523
alex 2011-08-16 17:58.

境界線は、交差する場所で角度の付いたエッジを使用します(45°の角度で同じ幅の境界線を使用しますが、境界線の幅を変更すると角度が歪む可能性があります)。

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}
<div></div>

見ていjsFiddleを。

特定の境界線を非表示にすることで、三角形の効果を得ることができます(上記のように、さまざまな部分をさまざまな色にすることでわかります)。transparent三角形を実現するためのエッジカラーとしてよく使用されます。

492
Mouna Cheikhna 2011-08-18 01:16.

基本的な正方形と境界線から始めます。境界線ごとに異なる色が付けられるため、境界線を区別できます。

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

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

ただし、上部の境界線は必要ないため、幅をに設定し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;
}

そして私たちはこれを手に入れます:

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

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

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

268
web-tiki 2014-07-18 06:30.

別のアプローチ:変換回転を使用したCSS3三角形

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

  • アニメーションへのリンクCSS3の三角形を作成する方法
  • そしてデモ:変換回転で作成された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;
}

ステップ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. レスポンシブなものは必要ありません。プレーンな三角形で十分です。ここで説明する境界線の手法を使用する必要があります。ブラウザの互換性が向上し、ここにあるすばらしい投稿のおかげで理解しやすくなります。
184
yunzen 2011-11-30 01:21.

これは、デモンストレーション用に作成した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>

49
Rai Ammad Khan 2014-06-17 20:09.

次の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のサイズは150x 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辺すべての境界線の色を変更しました。画像を添付しております。

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

背景色を白に変更しました。画像を添付しております。

したがって、必要な三角形が得られました。

38
Noname 2014-12-02 02:40.

そして今、完全に異なる何か...

cssトリックを使用する代わりに、htmlエンティティのような単純なソリューションを忘れないでください。

&#9650;

結果:

参照:上向き三角形と下向き三角形のHTMLエンティティは何ですか?

32
Daniel Imms 2013-03-22 01:20.

以下の三角形を考えてみましょう

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

これが私たちに与えられたものです:

なぜこの形で出てきたのですか?次の図は寸法を説明しています。下の境界線に15pxが使用され、左右に10pxが使用されていることに注意してください。

右の境界線を削除しても、直角三角形を作成するのは非常に簡単です。

29
PseudoNinja 2011-12-31 06:56.

さらに一歩進んで、これに基づいて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>

19
Alireza 2017-06-17 18:04.

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つの画像のすべての手順を確認するための画像シーケンスを作成しました。

18
lima_fil 2013-07-26 14:19.

別のアプローチ。線形グラデーションあり(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です

14
Stewartside 2016-03-10 06:10.

CSS clip-path

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

clip-path 一言で言えば

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

  • SmashingMagazineからの抜粋

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、独自の作成を開始するのに役立つリソースと資料をいくつか紹介します。

  • Clippy-clip-pathジェネレーター
  • W3C候補推奨ファイル
  • MDNclip-pathドキュメント
  • clip-path ブラウザのサポート
11
Tom Sarduy 2015-08-01 10:42.

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

ステップ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/

9
vsync 2015-05-28 09:55.

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

遊び場ページ


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

8
Temani Afif 2018-04-07 05:24.

三角形に境界線を適用する場合は、これを読んでください: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 bottomto top応答それを維持しながら、このケースでは、三角形状のいずれかの種類を取得することができますなど、。

1)長方形の三角形

そのような三角形を得るために、我々は1の直線勾配等の対角線方向を必要とするto bottom rightto 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>

しかし、それぞれの側に値を定義したい場合はどうでしょうか。もう一度計算するだけです!

hg1hg2をグラデーションの高さ(両方とも赤い線に等しい)として、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 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>

4
Doml The-Bread 2015-03-07 06:54.

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

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

4
HelloWorldNoMore 2015-12-14 16:05.

他の人はすでにこれをよく説明しています。これを簡単に説明するアニメーションを紹介します。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;
}
4
Danziger 2019-12-15 08:25.

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

1
satish mallick 2019-09-21 00:52.

これを試して:-

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}
<div class="triangle"></div>

0
coding-dude.com 2020-06-02 19:25.

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

  1. 使用する borders
  2. 使用する linear-gradient
  3. 使用する conic-gradient
  4. transformおよびの使用overflow
  5. 使用する clip-path

を使用してconic-gradient、方法3を除いてすべてがここでカバーされていると思うので、ここで共有します。

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }
<div class="triangle"></div>

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language