用CSS绘制任意三角形

·  阅读 1499

原理

html结构:

<div class="triangle"></div>
复制代码

设置样式:

.triangle {
  width: 100px;
  height: 100px;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}
复制代码

效果:

image.png

发现当border足够宽的时候,我们能明显看到相邻boder之间是有夹角的。而不是直角关系。那我们设置宽高为0,又会怎么样呢?

设置样式:

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}
复制代码

效果:

image.png

发现了一个由四个等腰直角三角形拼起来的正方形。要是我们设置三个边为透明,就能实现一个等腰直角三角形了!

等边三角形

仅仅上面的代码显然不能帮助我们实现任意三角形,我们以实现等边三角形作为基础的列子来理解任意三角形。
如果我们去除了上边框,设置样式:

.triangle {
  width: 0;
  height: 0;
  /* border-top: 100px solid red; */
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}
复制代码


效果:

image.png

image.png
 为什么左边和右边的边框都被砍去了一半?

如果我们去除了上下边框呢,设置样式:

.triangle {
  width: 0;
  height: 0;
  /* border-top: 100px solid red; */
  border-right: 100px solid green;
  /* border-bottom: 100px solid blue; */
  border-left: 100px solid yellow;
}
复制代码


效果:

一片空白,啥也没有了,其实并不是,检查属性:

image.png


我们可以猜测:三角形的斜边的长度 = 相邻两个外边距的宽度之和。
image.png

当不设置上边框的时候,也是能符合这个定律的。
那就好办了,等边三角形的的边定下来了(定为a=200),我们只要求高(边框的宽即可)。
按照公式 h = √3/2a

算出 h = 173.2

设置样式:

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 173.2px solid yellow;
}
复制代码


效果:

image.png

黄色的部分就是一个等边三角形了。把其他的边距设置为透明,即可。
至此,基于上面的这个猜测:

三角形的斜边的长度 = 相邻两个外边距的宽度之和。
还可知:垂线与底边的交点与相邻外边距的宽度有关。

我们就能画出任意形状的三角形啦。

画箭头

画箭头的原理更加简单,只要绘制两个三角形,一个覆盖在领一个上面,偏移相对的几个像素,就能绘制出一个箭头啦。



关注我:kuckboy

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改