css实现带圆角三角型的示例代码

另外一个可实现比较和谐的过渡的想法是，绘制一个足够大的圆形overflow: hidden区域，再将三角形放进去，三个角便会被切割得比较和谐，但此时三角形已经相当大，便可使用transform: scale()将它缩小。很麻烦是不是？事倍功半，我还是算了……

应用

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

.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;
}

写在最后

把脑子里的记忆，笔述出来也是一种整理知识的方式！（这逼装得……），希望对大家的学习有所帮助，也希望大家多多支持软件开发网。