css實現圓角三角形的方法

本文主要和大家介紹了css實現帶圓角三角型的範例程式碼的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

前言

目標實現如下：

實現

<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的大小：

1. 調整高度：border-top-width: 100px;;

2. 調整寬度：border-right-width: 50px;border-left-width: 50px;

其他方向的triangle如此類推調節大小。

看“前言”中的triangle-down你會發現向下的角並不是尖銳的，而是有那麼點“小弧度”。

這個“小弧度”實現並不難，其實也不是弧度，而是利用overflow: hidden將角“切去”一點點，放大便可發現過渡並不和諧，但由於此類三角形實際使用時尺寸會很小，因此肉眼對此不和諧並無感知，會誤以為是小圓角，上面例子即是切去了2px。

另外一個可實現比較和諧的過渡的想法是，繪製一個足夠大的圓形overflow: hidden地區，再將三角形放進去，三個角便會被切割得比較和諧，但此時三角形已經相當大，便可使用transform: scale()將它縮小。很麻煩是不是？事倍功半，我還是算了……

應用

<p class="bubble-box">  <p class="bubble-box-hat">    <i class="triangle triangle-up"></i>  </p>   <p class="bubble-box-body">i am isaac!</p></p>

.bubble-box{  font-size: 0;  margin-top: 50px;}.bubble-box-hat{  text-align: center;}.bubble-box-body{  color: #FFFFFF;  background: rgb(181, 181, 181);  font-size: 28px;  border-radius: 10px;  padding: 100px;  text-align: center;}