css做一个三角形详解

一般有三角形的化都是通过图片来实现的 也可以通过css 样式来产生 非常牛叉
css做三角形 有什么作用？
优化代码 样式多 复用性强 强烈推荐！！！
css实现的业务逻辑

核心是border

border-width

.sanjiaoxing1{
  width: 50rpx;
  height:50rpx;
  border-width: 100rpx;
  border-style: solid;
  border-color: red ;
}

border-color

主要是透明属性 transparent

.sanjiaoxing1{
  width: 0;
  height:0;
  border-width: 100rpx;
  border-style: solid;
  border-color: red red red transparent ;
}

结合实现三角形

.sanjiaoxing1{
  width: 0;
  height:0;
  border-width: 100rpx;
  border-style: solid;
  border-color: red transparent transparent transparent ;
}

总结

四条粗border组成正方形 color显示1/4 就是三角形

如果对你有帮助 点个赞吧 ~~