CSS Tricks'te birçok farklı CSS şekli var - Şekiller CSS ve özellikle bir üçgenle şaşkınım:

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

Nasıl ve neden çalışır?

CSS Üçgenleri: Beş İşlemde Bir Trajedi

Olarak Alex bahsedilen , 45 derecelik açılarda birbirine karşı eşit genişlik butt kadar sınırları:

Üst kenarlığınız yoksa, şuna benzer:

Sonra ona 0 genişliğini veriyorsunuz ...

... ve yüksekliği 0 ...

... ve son olarak, iki yan kenarı saydam yaparsınız:

Bu bir üçgen ile sonuçlanır.

Kenarlıklar kesiştikleri açılı bir kenar kullanır (eşit genişlik sınırlarına sahip 45 ° açı, ancak kenarlık genişliklerini değiştirmek açıyı eğebilir).

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

<div></div>

JsFiddle'a bir göz atın .

Belirli kenarlıkları gizleyerek üçgen efektini elde edebilirsiniz (yukarıda gördüğünüz gibi farklı bölümleri farklı renkler yaparak). transparentüçgen şeklini elde etmek için genellikle kenar rengi olarak kullanılır.

Temel bir kare ve kenarlıklarla başlayın. Her kenarlığa farklı bir renk verilecek, böylece bunları birbirinden ayırabiliriz:

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

size bunu verir :

Ancak üst kenarlığa gerek yoktur, bu nedenle genişliğini ayarlayın 0px. Şimdi sınırımızın altı 200pxüçgenimizi 200 piksel boyunda yapacak.

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

ve biz alacak bu :

Ardından iki yan üçgeni gizlemek için kenarlık rengini saydam olarak ayarlayın. Üst kenarlık etkili bir şekilde silindiği için, kenar üst rengini de saydam olarak ayarlayabiliriz.

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

sonunda bunu elde ederiz :

Farklı yaklaşım:

Dönüş döndürmeli CSS3 üçgenleri

Bu tekniği kullanarak üçgen şekil yapmak oldukça kolaydır. Bu tekniğin burada nasıl çalıştığını açıklayan bir animasyon görmeyi tercih edenler için:

• ANİMASYON Bağlantısı : CSS3 üçgeni nasıl yapılır .
• Ve DEMO: CSS3 üçgenler ile yapılan döndürme dönüşümü.

Aksi takdirde, bir unsurla ikizkenar dik açılı bir üçgenin nasıl yapılacağına dair 4 eylemde (bu bir trajedi değildir) ayrıntılı açıklama.

• Not 1: İkizkenar olmayan üçgenler ve süslü şeyler için 4. adımı görebilirsiniz .
• Not 2: aşağıdaki snippet'lere satıcı önekleri dahil değildir. kodlama demolarına dahil edilirler .
• Not 3: Aşağıdaki açıklama için HTML her zaman: <div class="tr"></div>

ADIM 1: Bir div yapın

Kolay, sadece emin ol width = 1.41 x height. En boy oranını korumak ve duyarlı bir üçgen yapmak için yüzdeler ve dolgu tabanı kullanımı da dahil olmak üzere herhangi bir tekniği ( buraya bakın ) kullanabilirsiniz . Aşağıdaki görüntüde div altın sarısı bir kenarlığa sahiptir.

Bu div'e, bir sözde öğe ekleyin ve bu öğeye % 100 genişlik ve üst öğe yüksekliği verin. Sözde öğenin aşağıdaki görüntüde mavi bir arka planı vardır.

Bu noktada, şu CSS'ye sahibiz :

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

ADIM 2: Dönelim

İlk olarak, en önemlisi: bir dönüşüm kaynağını tanımlayın . Varsayılan kökenli sözde elemanının merkezinde ve biz sol alt tarafta olması gerekiyor. Bu CSS'yi ekleyerek sözde öğeye :

transform-origin:0 100%; veya transform-origin: left bottom;

Şimdi sözde elemanı saat yönünde 45 derece döndürebiliriz transform : rotate(45deg);

Bu noktada, şu CSS'ye sahibiz :

.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.ADIM: saklayın

Sözde öğenin istenmeyen bölümlerini (div'ı sarı kenarlıkla taşan her şey) gizlemek overflow:hidden;için kapta ayarlamanız gerekir . sarı kenarlığı kaldırdıktan sonra ... bir ÜÇGEN olsun ! :

DEMO

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.ADIM: daha ileri gidin ...

Demoda gösterildiği gibi , üçgenleri özelleştirebilirsiniz:

1. İle oynayarak onları daha ince veya düz hale getirin skewX().
2. Dönüştürme origni ve rotasyon yönü ile oynayarak onları sola, sağa veya başka bir yöne doğrultun.
3. 3D dönüşüm özelliği ile biraz yansıma yapın .
4. Üçgen kenarlıkları verin
5. Üçgenin içine bir resim koyun
6. Çok daha fazlası ... CSS3'ün güçlerini serbest bırakın !

Neden bu tekniği kullanıyorsunuz?

1. Üçgen kolayca tepki verebilir.
2. Kenarlıklı bir üçgen yapabilirsiniz .
3. Üçgenin sınırlarını koruyabilirsiniz. Bu, fareyle üzerine gelme durumunu veya tıklama olayını yalnızca imleç üçgenin içindeyken tetikleyebileceğiniz anlamına gelir . Bunun gibi bazı durumlarda bu çok kullanışlı olabilir her üçgen, bu kendi vurgulu durumu vardır böylece her üçgen 's komşuları bindirmek mümkün değil.
4. Yansımalar gibi bazı süslü efektler yapabilirsiniz .
5. 2d ve 3d dönüşüm özelliklerini anlamanıza yardımcı olacaktır.

Neden bu tekniği kullanmıyorsunuz?

1. Ana dezavantajı tarayıcı uyumluluğudur , 2d dönüşüm özellikleri IE9 + tarafından desteklenir ve bu nedenle IE8'i desteklemeyi planlıyorsanız bu tekniği kullanamazsınız. Daha fazla bilgi için CanIuse'a bakın . Yansıma tarayıcı desteği gibi 3d dönüşümleri kullanan bazı süslü efektler için IE10 + ( daha fazla bilgi için canIuse'a bakın ).
2. Duyarlı bir şeye ihtiyacınız yoktur ve sizin için düz bir üçgen iyidir, o zaman burada açıklanan sınır tekniği için gitmelisiniz: buradaki şaşırtıcı mesajlar sayesinde daha iyi tarayıcı uyumluluğu ve daha kolay anlaşılır.

JSFiddle'da gösteri için oluşturduğum bir animasyon .

Ayrıca aşağıdaki snippet'e bakın.

Bu bir Screencast yapılmış bir Animasyonlu 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>

Rastgele sürüm

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

Hepsi bir kerede sürüm

$('#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>

Diyelim ki şu div var:

<div id="triangle" />

Şimdi CSS'yi adım adım düzenleyin, böylece etrafta neler olduğu hakkında net bir fikir edinebilirsiniz.

ADIM 1: JSfiddle Bağlantısı:

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

Bu basit bir div. Çok basit bir CSS ile. Böylece bir meslekten olmayan kimse anlayabilir. Div, kenarlığı 50 piksel olan 150 x 150 piksel boyutlarına sahiptir. Görüntü eklenmiştir:

ADIM 2: JSfiddle Bağlantısı:

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

Şimdi 4 tarafın da sınır rengini değiştirdim. Görüntü eklenmiştir.

ADIM: 3 JSfiddle Bağlantısı:

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

Şimdi div'in yüksekliğini ve genişliğini 150 pikselden sıfıra değiştirdim. Görüntü ekli

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

Şimdi alt kenarlık dışında tüm sınırları şeffaflaştırdım. Görüntü aşağıda eklenmiştir.

5.ADIM : JSfiddle Bağlantısı:

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

Şimdi arka plan rengini beyaz olarak değiştirdim. Görüntü eklenmiştir.

Bu yüzden ihtiyacımız olan üçgeni aldık.

Ve şimdi tamamen farklı bir şey ...

Css hileleri kullanmak yerine html varlıkları kadar basit çözümleri unutmayın:

▲

Sonuç:

▲

Bkz: Yukarı ve aşağı üçgenler için HTML varlıkları nelerdir?

Aşağıdaki üçgeni düşünün

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

Bize verilen budur:

Neden bu şekilde çıktı? Aşağıdaki şema boyutları açıklar, alt kenarlık için 15 piksel ve sol ve sağ için 10 piksel kullanıldığını unutmayın.

Doğru kenarlığı kaldırarak da dik açılı üçgen yapmak oldukça kolaydır.

Bir adım daha ileri giderek, buna dayalı css kullanarak arka ve sonraki düğmelerime oklar ekledim (evet,% 100 çapraz tarayıcı olmadığını biliyorum, ancak daha az kaygan değilim).

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

Tamam, bu üçgen, öğelerin kenarlıklarının HTML ve CSS'de birlikte çalışma şekli nedeniyle oluşturulacak ...

Genellikle 1 veya 2 piksel kenarlık kullandığımızdan, kenarlıkların aynı genişliğe sahip birbirleriyle 45 ° açılar oluşturduğunu ve genişlik değişirse, açı derecesi de değiştiğinde, aşağıda oluşturduğum CSS kodunu çalıştırmayın:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

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

Sonra bir sonraki adımda, böyle bir genişliğe veya yüksekliğe sahip değiliz:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

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

Ve şimdi sol ve sağ kenarlıkları arzu edilen üçgeni aşağıdaki gibi yapmak için görünmez yapıyoruz:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

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

Snippet'i adımları görmek için çalıştırmak istemiyorsanız, bir resimdeki tüm adımlara göz atmak için bir görüntü dizisi oluşturdum:

Farklı yaklaşım. Doğrusal renk geçişli (IE için, yalnızca IE 10+). Herhangi bir açıyı kullanabilirsiniz:

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

İşte jsfiddle

CSS clip-path

Bu sorunun cevapsız olduğunu düşündüğüm bir şey; clip-path

clip-path kısaca

Kırpma clip-pathözelliği ile dikdörtgen bir kağıt parçasından bir şekli (daire veya beşgen gibi) kesmeye benzer. Tesis, “ CSS Maskeleme Modülü Seviye 1 ” spesifikasyonuna aittir . Spesifikasyonlar, “CSS maskeleme, görsel öğelerin kısımlarını kısmen veya tamamen gizlemek için iki yol sağlar: maskeleme ve kırpma”.

• Smashing Magazine'den Alıntı

clip-pathparametrelerinde belirttiğiniz şekli kesmek için öğenin kenarlıkları yerine kendisini kullanır. Düzenlemeyi çok kolaylaştıran süper basit bir yüzde tabanlı koordinat sistemi kullanır ve birkaç dakika içinde alıp tuhaf ve harika şekiller oluşturabileceğiniz anlamına gelir.

Üçgen Şekli Örneği

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>

Dezavantaj

Şu anda büyük bir dezavantajı var, biri büyük destek eksikliği, sadece gerçekten -webkit-tarayıcılar içinde kapsanıyor ve IE'de desteklenmiyor ve FireFox'ta çok kısmi.

kaynaklar

İşte daha iyi anlamanıza clip-pathve kendinizinkini oluşturmaya başlamanıza yardımcı olacak bazı yararlı kaynaklar ve materyaller .

• Clippy - Bir clip-pathjeneratör
• W3C Aday Öneri Dosyası
• MDN clip-pathbelgeleri
• clip-path Tarayıcı Desteği

Bu eski bir soru, ama bence bu üçgen tekniğini kullanarak bir ok oluşturmayı paylaşmaya değecek.

Aşama 1:

2 üçgen oluşturalım, ikincisi için :aftersözde sınıfı kullanacağız ve diğerinin hemen altına yerleştireceğiz:

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

Adım 2

Şimdi sadece ikinci üçgenin baskın kenarlık rengini arka planın aynı rengine ayarlamalıyız:

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

Tüm oklarla uğraş :
http://jsfiddle.net/tomsarduy/r0zksgeu/

SASS (SCSS) üçgen karışımı

Bunu otomatik olarak bir CSS üçgeni oluşturmayı (ve KURU) kolaylaştırmak için yazdım:

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

kullanım örneği:

span {
  @include triangle(bottom, red, 10px);
}

Bahçesi sayfası

Önemli not:
üçgen bazı tarayıcılarda pikselli görünüyorsa , burada açıklanan yöntemlerden birini deneyin .

^{Üçgene kenarlık uygulamak istiyorsanız şunu okuyun: CSS ile üçgen mi oluşturuyorsunuz?}

Hemen hemen tüm cevaplar sınır kullanılarak oluşturulan üçgene odaklanır, bu yüzden linear-gradientyöntemi ( @lima_fil yanıtında başladığı gibi) ayrıntılı olarak açıklayacağım .

Gibi bir derece değeri kullanmak, istediğimiz üçgeni elde etmek için 45°bizi belirli bir orana saygı göstermeye zorlar height/widthve bu duyarlı olmayacaktır:

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

Bunun yerine bunu yapmanın biz gibi yönünün önceden tanımlı değerleri dikkate almalıdır to bottom, to topduyarlı tutarken biz üçgen şeklin her türlü elde edebilirsiniz Bu durumda, vb.

1) Dikdörtgen üçgen

Örneğin üçgen elde etmek için biz, bir doğrusal gradyan ve benzerleri gibi bir çapraz yön mi to bottom right, to top left, to bottom left, vs

.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) ikizkenar üçgen

Bunun için yukarıdaki gibi 2 doğrusal gradyana ihtiyacımız olacak ve her biri genişliğin (veya yüksekliğin) yarısını alacak. Sanki ilk üçgenin ayna görüntüsünü oluşturuyoruz.

.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) eşkenar üçgen

Gradyanın yüksekliği ve genişliği arasında bir ilişki sürdürmemiz gerektiğinden, bu işlemek biraz zor. Yukarıdaki ile aynı üçgene sahip olacağız, ancak ikizkenar üçgeni eşkenar üçgene dönüştürmek için hesaplamayı daha karmaşık hale getireceğiz.

Bunu kolaylaştırmak için, div bölümümüzün genişliğinin bilindiğini ve yüksekliğin üçgenimizi ( height >= width) içine çekebilecek kadar büyük olduğunu düşüneceğiz .

İki gradyanımız var g1ve g2mavi çizgi genişliğidir div wve her gradyan% 50'sine ( w/2) sahip olacak ve üçgenin her bir tarafı eşit olacaktır w. Yeşil çizgi her iki eğimin yüksekliğidirhg ve aşağıdaki formülü kolayca elde edebiliriz:

(w/2)² + hg² = w²---> hg = (sqrt(3)/2) * w--->hg = 0.866 * w

calc()Hesaplamamızı yapmak ve gerekli sonucu elde etmek için güvenebiliriz :

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

Başka bir yol, div yüksekliğini kontrol etmek ve degradenin sözdizimini kolay tutmaktır:

.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) Rastgele üçgen

Rastgele bir üçgen elde etmek için, her birinin% 50'sini kaldırmamız gerektiğinden kolaydır, ancak iki koşulu korumalıyız (her ikisi de aynı yüksekliğe sahip olmalı ve her iki genişliğin toplamı% 100 olmalıdır).

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

Ama ya her bir taraf için bir değer tanımlamak istersek? Tekrar hesap yapmamız gerekiyor!

En tanımlayalım hg1ve hg2sonra bizim gradyanı yüksekliği olarak (her ikisi de kırmızı çizgi eşittir) wg1ve wg2bizim gradyan eni olarak ( wg1 + wg2 = a). Hesaplamayı detaylandıramayacağım, ancak sonunda sahip olacağız:

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

Şimdi, CSS sınırına ulaştık, çünkü calc()bunu uygulayamayacağız, bu yüzden sadece nihai sonucu manuel olarak toplamamız ve sabit boyut olarak kullanmamız gerekiyor:

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

Bonus

Döndürme ve / veya eğim uygulayabileceğimizi ve daha fazla üçgen elde etmek için daha fazla seçeneğimiz olduğunu unutmamalıyız:

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

Ve elbette , bazı durumlarda daha uygun olabilecek SVG çözümünü aklımızda tutmalıyız :

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>

İşte başka bir keman:

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

Diğerleri bunu zaten iyi açıkladı. Size bunu hızlı bir şekilde açıklayacak bir animasyon vereyim : http://codepen.io/chriscoyier/pen/lotjh

İşte oyun oynamak ve kavramları öğrenmek için bazı kod.

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

Bununla oynayın ve ne olduğunu görün. Yüksekliği ve genişliği sıfıra ayarlayın. Ardından üst kenarlığı kaldırın ve sol ve sağ şeffaf olun veya bir css üçgeni yapmak için aşağıdaki koda bakın:

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

Eğer uğraşmak istiyorsanız border-size, widthve heightve bu farklı şekiller yaratabilirsiniz nasıl, şunu deneyin:

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>

Bunu dene:-

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

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

Bunun eski olduğunu biliyorum, ancak bu tartışmaya, yalnızca HTML ve CSS kullanarak üçgen oluşturmak için en az 5 farklı yöntem olduğunu eklemek istiyorum .

1. kullanma borders
2. kullanma linear-gradient
3. kullanma conic-gradient
4. kullanılması transformveoverflow
5. kullanma clip-path

Bence, burada yöntem 3 dışında, burada ele conic-gradientalınacak, bu yüzden burada paylaşacağım düşünüyorum:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

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