缺角的DIV

如何让方方正正的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