css圓角三角形的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2023-02-25 12:23:18 作者：佚名

今天給大家?guī)?lái)一個(gè)如何實(shí)現(xiàn)圓角三角形的方案，這個(gè)方案雖然可以實(shí)現(xiàn)，但是也是借助拼湊等方式來(lái)實(shí)現(xiàn)的，假如想一個(gè)div來(lái)實(shí)現(xiàn)圓角三角形，還是比較困難的。之前文章講了如何實(shí)現(xiàn)對(duì)話框，里面介紹了三角形的實(shí)現(xiàn)方式。今天講講如何實(shí)現(xiàn)圓角三角形

方案一：全兼容的 SVG 方案

想要生成一個(gè)帶圓角的三角形，代碼量最少、最好的方式是使用 SVG 生成。

使用 SVG 的多邊形標(biāo)簽 < polygon > 生成一個(gè)三邊形，使用 SVG 的 stroke-linejoin="round" 生成連接處的圓角。

代碼量非常少，核心代碼如下：

<svg  width="250" height="250" viewBox="-50 -50 300 300">
  <polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/>
</svg>
.triangle {
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
}

效果圖

通過(guò) stroke-width 控制圓角大小那么如何控制圓角大小呢？也非常簡(jiǎn)單，通過(guò)控制 stroke-width 的大小，可以改變圓角的大小。當(dāng)然，要保持三角形大小一致，在增大/縮小 stroke-width 的同時(shí)，需要縮小/增大圖形的 width/height。

方案二：圖形拼接

可以用正方形變成菱形，然后加圓角

div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
   border-top-right-radius: 30%;
}

拼接 3 個(gè)帶圓角的菱形

<style>
div{
    position: relative;
    background-color: orange;
    margin:50px auto;
}
div:before,
div:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
div,
div:before,
div:after {
    width:  10em;
    height: 10em;
    border-top-right-radius: 30%;
}
div {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
div:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
}
div:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}
</style>
<div></div>

效果圖

將上面代碼放到html中，可以看到效果！

方案三：圖形拼接實(shí)現(xiàn)漸變色圓角三角形

本質(zhì)就是實(shí)現(xiàn)一個(gè)貝殼形狀，然后通過(guò)旋轉(zhuǎn)，偽類來(lái)實(shí)現(xiàn)，貝殼形狀做個(gè)漸變就可以了。

代碼如下：

<div></div>
<style>
     div {
    width: 200px;
    height: 200px;
    transform: rotate(30deg) skewY(30deg) scaleX(0.866);
    border-radius: 20%;
    margin-top:70px;
    overflow: hidden;
  border: unset;
}

div::before,
div::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
}
div::before {
    border-radius: 20% 20% 20% 55%;
    background: #000;
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
}
div::after {
    border-radius: 20% 20% 55% 20%;
    background: #000;
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}

div::before,
div::after {
    background: linear-gradient(#0f0, #03a9f4);
}
</style>

效果圖