前言
目標實現效果圖如下：
實現
| <i class="triangle triangle-up"></i><i class="triangle triangle-right"></i><i class="triangle triangle-down"></i><i class="triangle triangle-left"></i> |
| .triangle{ display: inline-block; font-size: 0; overflow: hidden;}.triangle:before{ content: ""; position: relative; display: inline-block; border: 25px solid transparent;}.triangle-up{ position: relative; top: 2px; border-top-left-radius: 50%; border-top-right-radius: 50%;}.triangle-up:before{ bottom: 2px; border-top-width: 0; border-bottom-width: 50px; border-bottom-color: rgb(181, 181, 181);}.triangle-right{ position: relative; right: 2px; border-top-right-radius: 50%; border-bottom-right-radius: 50%;}.triangle-right:before{ left: 2px; border-right-width: 0; border-left-width: 50px; border-left-color: rgb(181, 181, 181);}.triangle-down{ position: relative; bottom: 2px; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%;}.triangle-down:before{ top: 2px; border-bottom-width: 0; border-top-width: 50px; border-top-color: rgb(181, 181, 181);}.triangle-left{ position: relative; left: 2px; border-top-left-radius: 50%; border-bottom-left-radius: 50%;}.triangle-left:before{ right: 2px; border-left-width: 0; border-right-width: 50px; border-right-color: rgba(181, 181, 181, 1);} |
剖析
從以上代碼中抽出一個triangle來剖析，就拿triangle-down來說。
一般css是不能畫斜線的，因此得另辟蹊徑。觀以上實現代碼，你會發現大量使用到border，其實這就是核心，也不復雜，一幅圖便可說明
調整三角形的大小或形狀可以通過調節不同方向的border-width的大小來達到此目的，比如說調整triangle-down的大小：
其他方向的triangle如此類推調節大小。
看“前言”中的triangle-down你會發現向下的角并不是尖銳的，而是有那么點“小弧度”。
這個“小弧度”實現并不難，其實也不是弧度，而是利用overflow: hidden將角“切去”一點點，放大便可發現過渡并不和諧，但由于此類三角形實際使用時尺寸會很小，因此肉眼對此不和諧并無感知，會誤以為是小圓角，上面例子即是切去了2px。
另外一個可實現比較和諧的過渡的想法是，繪制一個足夠大的圓形overflow: hidden區域，再將三角形放進去，三個角便會被切割得比較和諧，但此時三角形已經相當大，便可使用transform: scale()將它縮小。很麻煩是不是？事倍功半，我還是算了……
新聞熱點
疑難解答
