标签：图片 order 简单 parent nbsp back col ati after
原以为尖角三角形是png图片，原来是可以用css画出来，css3也可以很简单的得到带圆角的div，
大概思路：
1.画出一个带细边框的div
2.使用::before和left:100%在div的右边添加一个height和width为0但是带边框的元素
3.使用::after覆盖before
#demo {
width: 100px;
height: 100px;
background-color: #fff;
border: 2px rgb(31, 197, 86) solid;
border-radius:10px;
position: relative;
}
/*先画出一个三角形*/
#demo::before{
content: ‘‘;
width: 0px;
height: 0px;
border:20px solid transparent;/*border设置成透明，但是右边border设置成红色*/
border-left-color: rgb(55, 82, 235) ;
top: 10px;
left: 100%;
position: absolute;
}
/*用透明三角形去覆盖这个三角形*/
#demo::after{
content: ‘‘;
width: 0px;
height: 0px;
border:18px solid transparent;
border-left-color: white ;
top: 12px;
left: 100%;
position: absolute;
}
这样就出现了一个类似消息发送的形状，css是不是很神奇呢
标签：图片 order 简单 parent nbsp back col ati after
原文地址：https://www.cnblogs.com/MarkSun3/p/9128069.html
