@[toc]

效果

• 先上效果图，是不是大家所想的那样。为了明显，改了颜色
• 转了一圈，这个效果的实现方式，有用三角图片实现的，有用矩形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群交流： [游戏-Web-开发技术栈 ☄️] '300567032'== ==点击下方图标一键加入！==