Soru CSS üçgenleri nasıl çalışır?


Üzerinde farklı CSS şekilleri var. CSS Püf Noktaları - CSS Şekilleri ve özellikle bir üçgenle şaşırdım:

CSS Triangle

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


1637
2017-08-16 03:54


Menşei


Harika soru! Eşkenar üçgen çizmek mümkün olsaydı daha da etkileyici olurdu;) - Abel
Yapabilirsin: jsfiddle.net/wbZet - mskfisher
Orada olmayan kareye ne dersin? jsfiddle.net/minitech/sZgaa - Ry-♦
Bu basit, 'kırmızı' ve 'mavi' ve üçgeni mavi olacak. - Ofer Zelig
Bir arkadaşımın bir açıklaması olan bir sayfasının ve 3 boyutlu nesneler oluşturmak için onu kullanan bir uygulamasının var: uselesspickles.com/triangles - Juan Mendes


Cevaplar:


CSS Üçgenleri: Beş Elde Bir Trajedi

Gibi alex dedieşit genişlikte kenarlar 45 derecelik açılarla birbirlerine doğru kıvrılır:

borders meet at 45 degree angles, content in middle

Üst sınırınız olmadığında, şuna benziyor:

no top border

O zaman ona 0 ... genişliğini verirsiniz.

no width

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

no height either

... ve sonunda, iki tarafın sınırlarını saydamlaştırıyorsunuz:

transparent side borders

Bu bir üçgenle sonuçlanır.


2057
2017-08-16 04:11



@Jauzsika, bu üçgenleri basitçe kullanarak ek eleman eklemeden bir sayfaya ekleyebilirsiniz. :before veya :after sözde sınıflar. - zzzzBov
@zzzzBov: sözde elemanları. - BoltClock♦
stackoverflow.com/questions/5623072/... Bay BoltClock'un atıfta bulunduğunu düşünüyorum. - thirtydot
Güzel resimler. Şimdi CSS'de yapabilir misin? - ikdc
Animasyonlarla hareket etme: jsfiddle.net/pimvdb/mA4Cu/104. Sadece benim gibi daha fazla görsel kanıta ihtiyaç duyanlar için ... - pimvdb


Kenarlıklar kesiştiği açılı bir kenar kullanır (eşit genişlikte kenarlarla 45 ° açı, ancak kenarlık genişliğinin değiştirilmesi açıyı çarpabilir).

Border example

jsFiddle.

Belirli sınırları gizleyerek, üçgen efektini alabilirsiniz (yukarıda gördüğünüz gibi farklı bölümleri farklı renkler oluşturarak). transparent Üçgen şeklini elde etmek için genellikle kenar rengi olarak kullanılır.


486
2017-08-16 03:58





Temel bir kare ve sınırlarla başlayın. Her bir sınır farklı bir renk verilecek, böylece onlara ayrı bir şekilde anlatabiliriz:

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

sana ne veriyor bu:

square with four borders

Ancak üst kenarlığa gerek yok, bu yüzden genişliğini 0px. Şimdi sınırımız 200px bizim üçgen 200px boyunda yapacak.

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

ve alacağız bu:

bottom half of square with four borders

Daha sonra iki yan üçgeni gizlemek için kenarlık rengini saydam olarak ayarlayın. Üst sınır etkili bir şekilde silinmiş olduğundan, kenarlık üst rengini de şeffaf olarak ayarlayabiliriz.

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

sonunda aldık bu:

triangular bottom border


437
2017-08-17 11:16



Havalı, ama bu değil aynısı yolu? :-) - Stanislav Shabalin
There's another way to draw .., aynı şekilde ortaya çıkıyor :) Güzel bir açıklama olsa da - Hammad Khan
Büyük yapay eserler içeren JPEG'ler kullanmak için -1. Ancak caydırıcılık için gelecekte bağlantı kurabildiğim JPEG'leri kullanmamanın harika bir örneğini oluşturmak için +1. ;) - Henrik Heimbuerger
neden burada bir gif kullanılmıyor? - prusswan
Maalesef @hheimbuerger, resimlerinizi sabitleyerek örneğinizi karıştırdım. İle bağlantı kurmanız gerekecek bu cevabın 2. revizyonu gelecekte. - Rory O'Kane


Farklı yaklaşım:

CSS3 üçgenleri dönüşüm ile döndürme

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

gif animation : how to make a triangle with transform rotate

Aksi taktirde, burada 4 eylemde (bu bir trajedi değildir) ayrıntılı bir açıklama olup, bir öğe ile bir isosceles dik açılı üçgenin nasıl yapılacağıdır.

  • Not 1: olmayan isosceles üçgenler ve fantezi şeyler için, adım 4 görebilirsiniz.
  • Not 2: aşağıdaki parçacıklarda, satıcı önekleri dahil değildir. onlar dahil codepen demoları.
  • Not 3: Aşağıdaki açıklamanın HTML'si her zaman:  <div class="tr"></div>

AŞAMA 1 : Div yapın

Kolay, sadece emin ol width = 1.41 x height. Herhangi bir techinque kullanabilirsiniz (buraya bakın) En boy oranını korumak için yüzdelerin ve dolgu altının kullanılması ve duyarlı üçgen. Aşağıdaki resimde div, altın sarısı bir kenarlığa sahiptir.

Bu div’ta yalancı öge ve% 100 genişlik ve ebeveyn yüksekliğini verin. Söz konusu öğe aşağıdaki resimde mavi bir arka plana sahiptir.

Making a CSS triangle with transform roate step 1

Bu noktada, biz buna sahibiz 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;
}

ADIM 2 : Dönelim

İlk olarak, en önemlisi: bir dönüşüm kaynağı tanımlamak. varsayılan başlangıç Sözde elemanın merkezinde ve sol altta ihtiyacımız var. Bunu ekleyerek CSS yalancı öğeye:

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

Şimdi pseudo elementi saat yönünde 45 derece döndürülebilir transform : rotate(45deg);

Creating a triangle with CSS3 step 2

Bu noktada, biz buna sahibiz 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);
}

ADIM 3: sakla

Sahte elemanın istenmeyen kısımlarını gizlemek için (div'u sarı kenarlıkla taşan her şey) sadece ayarlamanız gerekir overflow:hidden; konteynerde. sarı kenarlığı çıkardıktan sonra ... ÜÇGEN! :

DEMO

CSS triangle

CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

4. ADIM: Daha ileri git ...

Gösterildiği gibi gösteriüçgenleri özelleştirebilirsiniz:

  1. İle oynayarak onları daha ince veya daha düz hale getirin skewX().
  2. Dönüş yönü ve dönüş yönü ile oynayarak onları sola, sağa veya başka bir yöne yönlendirin.
  3. Yapmak bazı yansıma 3D dönüşüm özelliği ile.
  4. Ver üçgen sınırları
  5. Bir resim koy üçgenin içinde
  6. Çok daha fazlası ... CSS3!

Neden bu tekniği kullanıyorsunuz?

  1. Üçgen kolayca yanıt verebilir.
  2. Sen yapabilirsin kenarlıklı üçgen.
  3. Üçgenin sınırlarını koruyabilirsiniz. Bu, yalnızca imleç olduğunda vurgulu durumu veya tıklama etkinliğini tetikleyebileceğiniz anlamına gelir üçgenin içinde. Bu, bazı durumlarda çok kullanışlı olabilir Bu Her üçgenin komşularını kaplayamayacağı yerlerde, her üçgenin kendi vurgulu hali vardır.
  4. Biraz yapabilirsin yansımalar gibi fantezi efektler.
  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ğu, 2d dönüştürme özellikleri IE9 + tarafından desteklenir ve bu nedenle IE8'i desteklemeyi planlıyorsanız bu tekniği kullanamazsınız. Görmek Kullanabilirmiyim daha fazla bilgi için. 3D efektleri kullanarak bazı fantezi efektler için yansıma tarayıcı desteği IE10 + (bkz. kullanabilirmiyim daha fazla bilgi için).
  2. Yanıt verebilecek bir şeye ihtiyacınız yoktur ve basit bir üçgen sizin için iyi olur, o zaman burada açıklanan sınır tekniği için gitmelisiniz: daha iyi bir tarayıcı uyumluluğu ve buradaki hayranlık verici mesajlar sayesinde daha kolay anlaşılır.

215
2017-07-17 16:30



Muhtemelen 1.41'in, √2'nin bir yaklaşımı olduğunu ve yarattığınız üçgenin hipotenüsünün uzunluğunu, yani bu genişliğe ihtiyaç duyduğunuzu (en azından) söylemeniz gerekir. - KRyan
Cevabını basit tutmak istedim ama haklısın, @KRyan'dan bahsedilmeli - web-tiki
Aslında, bunu kullanmaya çalışırken, farklı genişliklerin nasıl kullanıldığına dair bir söz skewX türetilmiş yararlı olurdu. - KRyan
Üçgen için 1px katı kenarlık gerektiğinde bu yöntem daha iyi çalışır. - Roman Losev
Bu hareketli grafik için Vay. Resmin gerçek bir örneği 1000 kelime söyleyebilir! - Gaurav Ramanan


İşte bir JSFiddle'daki animasyon Gösteri için hazırlandım.

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

Bu bir Screencast'tan yapılmış bir Animasyonlu GIF

Animated Gif of Triangle

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 seferde

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


157
2017-11-29 11:21





Aşağıdaki div'a sahip olduğumuzu söyleyelim:

<div id="triangle" />

Şimdi CSS'yi adım adım düzenleyin, böylece neler olduğunu net bir şekilde anlayabilirsiniz.

AŞAMA 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. Yani bir layman anlayabiliyor. Div'in kenarlığı 50 piksel olan 150 x 150 piksel boyutlarındadır. Resim eklenmiştir:

enter image description here

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 sadece 4 tarafın sınır rengini değiştirdim. Resim eklenmiştir.

enter image description here

AŞAMA 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 sadece div'in yüksekliğini ve genişliğini 150 pikselden sıfıra değiştirdim. Görüntü ekli

enter image description here

4. Adım:  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 tüm sınırları alt sınırdan ayrı saydamlaştırdım. Görüntü aşağıda eklenmiştir.

enter image description here

ADIM 5:  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 beyaza dönüştürdüm. Resim eklenmiştir.

enter image description here

Dolayısıyla ihtiyacımız olan üçgeni aldık.


40
2018-06-17 06:09





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

Css hileleri kullanmak yerine, html varlıkları kadar basit çözümleri de unutma:

&#9650;

Sonuç:

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


35
2017-12-01 12:40



"Dövülmüş" kelimesinin burada uygun bir kelime olduğunu düşünmüyorum. Çözüm yazı tipi metriklerine dayanır, bu nedenle kesin konumlandırma oldukça şüphelidir, şekil üzerinde hiçbir kontrolünüz olmadığı anlamına gelmez. - user776686