css三角型画法

CSS是一种用于网站排版的样式表语言。其中，绘制三角形是CSS应用比较广泛的功能之一。下面我们来介绍一下CSS绘制三角形的方法。

/* 方法一：借助border属性 */
.triangle{
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top: 20px solid #000;
}

/* 方法二：利用伪元素 */
.triangle::before{
  content: ';
  display: block;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top: 20px solid #000;
}

/* 方法三：使用transform属性 */
.triangle{
  width: 0;
  height: 0;
  border-top: 20px solid #000;
  border-right: 20px solid transparent;
  transform: rotate(45deg);
}

/* 方法四：组合transform和伪元素 */
.triangle::before{
  content: ';
  display: block;
  width: 20px;
  height: 20px;
  background-color: #000;
  transform: rotate(45deg) skew(20deg, 20deg);
} 

以上就是四种常用的CSS绘制三角形的方法。通过使用这些方法，我们可以非常方便地实现网页布局中的一些比较复杂的效果。