纯CSS3实现圆角效果

首先本文要实现的尖角效果图为：

这里我们使用的是CSS3的伪元素:before和:after。在此之前我们先看下面两段代码和对应效果图：

//css代码
div{
    width: 0;  
    height: 0; 
    border-style: solid;
    border-width: 10px 25px; 
    border-color:#f00 #ff0 #0f0 #0ff;
}

//css代码
.corn{
    position: relative;
    width:150px;
    height:80px;
    margin:100px auto;
    background:pink;
    border:1px solid pink;
    border-radius: 5px;
}
.corn:before {  
    content: '';  
    width: 0;  
    height: 0; 
    position: absolute; 
    left: -50px;  
    top: 30px;
    border-style: solid;
    border-width: 10px 25px; 
    border-color:transparent #ff0 transparent transparent;  
}  
.corn:after {  
    content: "";  
    width: 0;  
    height: 0; 
    position: absolute;
    left: -40px;  
    top: 30px;   
    border-style: solid;
    border-width: 10px 25px;  
    border-color:transparent #f00 transparent transparent; 
} 

通过这两个我们应该就可以想到可以利用:before和:after伪元素绝对定位位置不同和不同方向的边框颜色和大小不同实现各种方向的不同形状的尖角。完整CSS代码如下：

.corn{
    position: relative;
    width:150px;
    height:80px;
    margin:100px auto;
    background:pink;
    border:1px solid pink;
    border-radius: 5px;
}
.corn:before {  
    content: '';  
    width: 0;  
    height: 0; 
    position: absolute; 
    left: -50px;  
    top: 30px;
    border-style: solid;
    border-width: 10px 25px; 
    border-color:transparent pink transparent transparent;  
}  
.corn:after {  
    content: "";  
    width: 0;  
    height: 0; 
    position: absolute;
    left: -49px;  
    top: 30px;   
    border-style: solid;
    border-width: 10px 25px;  
    border-color:transparent pink transparent transparent; 
}

---

这里实现的关键是:before和:after伪元素绝对定位的left和top值，border-width和border-color值。