如何让方方正正的DIV缺了一角?
首先想到的
利用before/after伪元素的绝对定位并让它的背景颜色和外部颜色保持一致, 用这种方法的好处在于你可以同时使用:before和:after在DIV上实现两个缺角
代码如下:
.block{
background:gray;
height:60px;
width:60px;
position: relative;
border-radius: 10px;
}
.block:before{
border-top-right-radius: 10px;
background: white;
position: absolute;
left: 0;
bottom: 0;
content: '';
display: block;
width: 20px;
height: 20px;
}
.block:after{
border-bottom-left-radius: 10px;
background: white;
position: absolute;
right: 0;
top: 0;
content: '';
display: block;
width: 20px;
height: 20px;
}
CodePen - http://codepen.io/huming0618/pen/XbEKNZ?embed-id=14064
第二种方法就是使用box-shodow,让阴影填充除缺角部分的所有区域,来达到缺角的效果。
http://codepen.io/Zoxon/pen/waymQd?editors=110
理解box-shodow属性
http://www.w3school.com.cn/cssref/pr_box-shadow.asp
http://www.cnblogs.com/lhb25/archive/2013/03/08/css3-box-shadow.html
代码
SCSS