首頁 > 文章 > web前端 > css實作圓角三角形的方法

css實作圓角三角形的方法

小云云原創: 2018-03-26 09:26:323519瀏覽

本文主要和大家介紹了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的大小：

調整高度：border-top-width: 100px;;
調整寬度：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;
}

css實作圓角三角形的方法

相關文章