CSS好玩的形状

• 三道杠的两种写法

.icon-menu {    
  display: inline-block;   
  width: 105px; height: 10px;    
  padding: 35px 0;  
  border-top: 10px solid;   
  border-bottom: 10px solid;   
  background-color: #000;    
  background-clip: content-box;
} 
.icon-menu1 {    
  display: inline-block;   
  width: 105px;height:20px;     
  border-top: 60px double ;   
  border-bottom: 20px solid ;   
} 

效果图如下

• 正方形的三种写法

 
 

 

.z{
  padding:10%;
  font-size:0;
  background:red;
}
.z1{
  display:inline-block;
  padding:10%;
  background:#fcaa00;
}
.z2{
  display:inline-block;
  width:100px;height:100px;
  background:#0caa0f;
}

效果图

1. 前两种可以自适应，第三种不行。
2. a因为是内联元素，所以是基线对齐，往下了一些，如果要与其他对齐display:inline-block即可。并且内联元素盒子前面都会存在幽灵空白盒子，所以需要设置font-size:0.至于啥是幽灵空白节点，移步张鑫旭大神的《css世界》
3. 内联的 padding和margin，水平和垂直方向的padding百分比都是相对于水平方向的，
   因此设置padding一个值的，都会得到正方形。

• 同心圆写法

.c{
  display:inline-block;
  width:100px;height:100px;
  padding:15px;
  background:#fcaa00;
  background-clip:content-box;
  border-radius:50%;
  border:15px solid #fcaa00
}

效果图

核心思想是把背景剪切到内容盒子background-clip:content-box,padding就没有颜色了，然后再设置边框颜色和背景颜色一样