HTML
Onları tek bir div ile yapabilirsiniz. Her yön olasılığı için derslerin olması güzel.
CSS
Fikir, genişliği ve yüksekliği sıfır olan bir kutudur. Okun gerçek genişliği ve yüksekliği, sınırın genişliğine göre belirlenir. Bir yukarı okta, örneğin, alt kenarlık renkliyken, sol ve sağ şeffaftır, bu da üçgeni oluşturur.
.arrow-up ( width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; ) .arrow-down ( width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; ) .arrow-right ( width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; ) .arrow-left ( width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; )Demo
CodePen'de Chris Coyier (@chriscoyier) tarafından CSS Üçgenlerini Açıklamak için Kalem Animasyonuna bakın.
Örnekler
Dave Everitt şöyle yazıyor:
Bir eşkenar üçgen için, yüksekliğin genişliğin% 86,6'sı olduğuna dikkat çekmek önemlidir, bu nedenle (border-left-width + border-right-width) * 0,866% = border-bottom-width