转载自

一、CSS写自适应大小的正方形

代码：

    
复制代码

效果图：

原理：

元素的padding的百分比数值是根据当前元素的宽度来计算的

padding只能取top或者bottom，自适应正方形其值要和宽一致，当然其他不同比例的矩形可以通过设置不同比例的padding就能得到

---

二、多列等高

代码：

复制代码

效果图：

原理：

padding补偿法

在高度小的元素上加一个数值为正padding-bottom和一个数值为负margin-bottom，再在父级加上overflow: hidden隐藏子元素超出的padding-bottom

注：

1. padding-bottom、margin-bottom之和要等于0（建议值不要太大，够用就行）
2. 代码中子元素单位用em是为了做gif效果更明显

（在我的笔记里面翻出来了，用这个解决了很多布局问题）

---

三、绘制三角形

代码

复制代码

效果图：

原理：

利用盒模型中的border属性

注：

1. 当盒模型的width/height为 0 时，border 边的形状是一个三角形，通过只设置三条边的 border ，并将所绘制的三角形相邻两边的 border 的颜色设置为 transparent, 最后通过调整border-width的比例绘制自己所需要的三角形

---

四、隐藏滚动条（这个算比较无聊的，主要当时有个需求非要隐藏）

代码

    
	
     
		
      
1
		
      
2
		
      
3
		
      
4
		
      
5
	
     
    
复制代码

效果图：

原理：

父元素超出部分隐藏，将滚动元素的width超出父元素的width，从而达到隐藏滚动条

---

五、边框字体同色（2018-06-06）

代码

复制代码

效果图：

原理：

1. 方案一：CSS3 currentColor 表示当前的文字颜色
2. 方案二：border 的默认值 (initial) 就是 currentColor, 可以直接写成 border: 50px solid; 省掉 color 的值