标签：
首先看个例子，该例的border四边的颜色不同，宽度均为50px
代码如下：
width: 0; height: 0; border-top:50px solid #FFF0C4; border-left:50px solid #C7F5BC; border-right:50px solid #D9BBF3; border-bottom:50px solid #FCC2C7;
根据border的这个特性，调整border宽度和颜色组合，我们可以画出各种三角形，如：
.border1{ height: 0; width: 0; border-top:50px solid #58a; border-left:50px solid white; border-right:50px solid white; border-bottom:50px solid white; }
.border2{ height: 0; width: 0; border-top:25px solid white; border-left:25px solid #58a; border-right:25px solid white; border-bottom:25px solid #58a; }
.border3{ height: 0; width: 0; border-top:50px solid #58a; border-left:20px solid white; border-right:50px solid white; border-bottom:50px solid white; }
再利用圆角和伪元素（::after,::before）就可以创建出简单的对话泡效果了
.talk3{ float: left; margin-left: 70px; height: 50px; width: 100px; background-color: #58a; border-radius: 60px; position: relative; } .talk3::after{ content: ""; position: absolute; bottom: -5px; border-top:10px solid rgba(0,0,0,0); border-left:40px solid rgba(0,0,0,0); border-right:40px solid #58a; border-bottom:10px solid #58a; left: -50px; transform: rotate(-10deg); }
这种方法使用利用的是background渐变linear-gradient方法。通常这个方法可以用来制造线性渐变
background: linear-gradient(to top right, black 10px, #58a);
将不同颜色的渐变开始位置设为同一点，或者将渐变点二的起始位置包含在渐变点一之前，则会使渐变一的渐变部分被渐变二的非渐变部分覆盖，形成切割背景的效果。这段话说的有些绕，用代码解释其实就是background: linear-gradient(to top right, transparent 渐变1, #58a 渐变2);(渐变2<渐变1)
利用这个原理，我们就可以制造出更加丰富的边框样式
background: #58a;
background: linear-gradient(45deg, transparent 20px, #58a 0%);
如果需要切分多个角，则可以配合背景切割技术，将背景分割为多个部分，在每个部分上进行切分
background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #655 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
上面用的是背景线性渐变，同理，利用径向渐变我们还可以创造出圆角的切口，修改上述代码为：
background: #58a;
background: radial-gradient(circle at top left,transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,transparent 15px, #655 0) top right,
radial-gradient(circle at bottom right,transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
得到效果：
ps:这种用法最好还是在正斜切，也就是斜切角是45，-45，135，-135的时候使用。其他角度(或径向)网页渲染后会看到明显的锯齿边缘，并不美观
这种方法是最为省事儿的，切出图片设为div的背景即可，但过多图片的引用会大大增加http请求数，降低页面的性能。还是只有当边框涉及到非常复杂的形状或阴影，难以用css解决的时候再用吧~
只要是画画的事儿，就没有这俩不能解决的，但既然是css实现，暂且也就不提他们了吧
标签：
原文地址：http://www.cnblogs.com/xiaoqianzi/p/5472328.html
