CSS 实现三角形 等腰梯形

三角形的答案是:

 div {
      width: 0;
      border: 100px solid;
      border-color: red transparent transparent;
}

CSS 实现三角形 等腰梯形_第1张图片
详细过程

借助的是 border-color:red green blue pink; 的四个属性
可以理解为 每个颜色代表一个小三角形 如

div {
     width: 0;
     border: 100px solid;
     border-color: red green blue pink;
}

CSS 实现三角形 等腰梯形_第2张图片
把其他三个透明后

 border-color: red transparent transparent;

CSS 实现三角形 等腰梯形_第3张图片

随便给一个width:100px 后

CSS 实现三角形 等腰梯形_第4张图片

你可能感兴趣的:(前端,css)