css三角形自适应

CSS三角形常用于制作图标或箭头等，有时候需要让三角形能够自适应大小或响应式布局。下面我们来看一下如何实现。

.triangle {
  width: 0; 
  height: 0; 
  border: 10px solid transparent; 
  border-right-color: red;
} 

上面的代码实现了一个红色的等腰直角三角形，实现原理是利用边框的特性，让其中三个边框为透明，只有右侧边框有颜色。其中，圆角可以通过border-radius属性来实现。

.triangle {
  width: 0; 
  height: 0; 
  border: 10px solid transparent; 
  border-right-color: red;
  transform: rotate(45deg); 
} 

如果希望得到一个等边三角形，可以通过旋转45度来实现。这里使用了transform属性来旋转元素。

.triangle {
  position: relative; 
}
.triangle:before {
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0;
  width: 0; 
  height: 0; 
  border: 10px solid transparent; 
  border-right-color: red;
} 

通过使用绝对定位和:before伪类，可以实现让三角形元素适应父元素大小的效果。具体做法是将三角形元素的位置设为relative，然后创建一个伪元素，设置其为absoulte，从而在三角形的位置前插入一个元素作为三角形图案。

.triangle {
  width: 50%; 
  height: 50%; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}
.triangle:before {
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%; 
  border: 10px solid transparent; 
  border-right-color: red;
  transform: rotate(45deg); 
} 

最后，为了让三角形能够用于响应式布局，需要将宽高以百分比的形式设置，再将其居中。同时，旋转的实现同样需要通过transform属性实现。