CSS 分析倒三角|侧三角|正三角的实现

效果

• 先上效果图，是不是大家所想的那样。为了明显，改了颜色
  
• 转了一圈，这个效果的实现方式，有用三角图片实现的，有用矩形div旋转实现的。
• 无意发现了CSDN的三角，发现是用纯CSS实现的。效果还是比较好的，代码如下
  

分析

• 为什么是这样的呢，我这里先精简一下他这个代码，同时借用W3School的在线编辑器来分析渲染效果。

  /* content盒子的宽高为0，以及右下左border透明是主要配置 */
  div.one {
  width:0px;
  height:0px;
  border-style: solid;
  /* 不需要专门指定下边框是0px，看完不用我说朋友们也会明白了 */
  border-width: 60px;
  border-color:pink transparent transparent transparent;
  }
  

  
• 接下来看另一个效果，相信你一眼就能明白了。平时我们大部分人潜意识里一直把border的四边当做是直线，其实在"微观"上，border的实现是四边均分且互不重叠的
  
• 再补充一个效果，这么看应该就很明白为什么要设置内容的宽高为0了
  

---

???? 如果您喜欢我的博客，欢迎加入QQ 全栈开发技术交流群 – ‘300567032’，点击下方图标一键加入！

---