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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

控訴裁判所によって取り下げられたメタン規制の施行を遅らせるEPAの試み

控訴裁判所によって取り下げられたメタン規制の施行を遅らせるEPAの試み

ゲッティ経由の画像。スコット・プルイットは環境保護庁の長であり、二酸化炭素とメタンガスとの愛情のこもった関係を持っていますが、彼は地球温暖化を信じることに冷たい肩を与えています。

メッセージングアプリの「誰かが入力している」バブルが実際に意味するもの

メッセージングアプリの「誰かが入力している」バブルが実際に意味するもの

一連の点滅する省略記号であろうと、「誰かが入力している」という明示的な通知であろうと、入力インジケーターと呼ばれるメッセージング機能は、多くの人にとって便利なツールであり、不安の原因でもあります。しかし、それがどのように機能するかについてもっと知ることは、少なくとも私たちにストレスを引き起こす推測ゲームを制限することができます。

マット・ラウアーは、離婚の和解で数百万ドルと馬の農場を失うことに「激怒」したと伝えられています

マット・ラウアーは、離婚の和解で数百万ドルと馬の農場を失うことに「激怒」したと伝えられています

マット・ラウアーと彼の妻のアネット・ロークは結婚間近であり、離婚手続きが激化していると伝えられています。ある情報筋は、ラウアーが「和解で約5,000万ドルをフォークする予定」であり、「マットは激怒している」と語った。彼は本質的に彼の純資産の半分をアネットに手渡している。

まあ、これは厄介です:レイプ告発者はケレンウィンズロージュニアの弁護士を彼女の攻撃者として特定します

まあ、これは厄介です:レイプ告発者はケレンウィンズロージュニアの弁護士を彼女の攻撃者として特定します

2018年6月15日金曜日、カリフォルニア州ビスタでの罪状認否の際、元NFLフットボール選手のケレンウィンズロージュニア(中央)が弁護士のブライアンワトキンス(左)とハーベイスタインバーグの後ろに立っています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language