css实战之三角形

作者: andreaxiang | 来源:发表于2017-04-28 12:16 被阅读0次

css 的规律摸索之路（二）css之居中问题（垂直居中与水平居中
css实战之三角形
css绘制三角形和对号
css-三角形
css 实现三角形箭头
纯CSS写三角形
css 如何写排序三角形箭头
前端面试题汇总
css实现三角形
解决浏览器样式差异带来的兼容问题

实不相瞒，三角形的实现是用边框来做的！
一般情况下，我们经常给一些div设置边框，比如：
border: 1px solid yellow;
就设定了一个黄色的边框。
很多人用这一属性没有发现奥妙，直到有一天，有个人这样玩：

<div class="d1"></div>
 <style>
  .div {
     width: 100px; height: 100px; 
     background: #333;
     border-top: 40px solid blue;
     border-bottom: 40px solid red;
     border-left: 40px solid yellow;
     border-right: 40px solid green;
  }
 </style>

效果如下图：

效果1.png

继续，如果我们把div的宽和高变为0，会发生什么呢？

效果2.png

这时候三角形已然显现出来了，只不过此时默认的边框区域其实是对折分为四个区域，顺序为：上下左右。

如果我们仅需要一个方向的三角形，则只需要让其余的三个边框变透明即可：
html

<body>
  <div class="t2"></div>
  <div class="t4"></div>
  <div class="t5"></div>
  <div class="t6"></div>
  <div class="t7"></div>
  <div class="t3"></div>
  <div class="t8"></div>
  <div class="t9"></div>
  <div class="t10"></div>
</body>

CSS

div{
  margin-bottom:20px;
}
.t2{
  width:0px;
  height:0px;
  border-top:30px solid green;
  border-bottom:30px solid red;
  border-left:30px solid yellow;
  border-right:30px solid purple;
}
.t4{
  width:0px;
  height:0px;
  border-top:30px solid green;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
}
.t5{
  width:0px;
  height:0px;
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-left:30px solid red;
  border-right:30px solid transparent;
}
.t6{
  width:0px;
  height:0px;
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid yellow;
}
.t7{
  width:0px;
  height:0px;
  border-top:30px solid transparent;
  border-bottom:30px solid black;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
}
.t3{
  width:0px;
  height:0px;
  border-top:30px solid transparent;
  border-bottom:30px solid yellow;
  border-left:30px solid yellow;
  border-right:30px solid transparent;
}
.t8{
  width:0px;
  height:0px;
  border-top:30px solid blue;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid blue;
}
.t9{
  width:0px;
  height:0px;
  border-top:30px solid red;
  border-bottom:30px solid transparent;
  border-left:30px solid red;
  border-right:30px solid transparent;
}
.t10{
  width:0px;
  height:0px;
  border-top:30px solid transparent;
  border-bottom:30px solid black;
  border-left:30px solid transparent;
  border-right:30px solid black;
}

效果预览