css 画圆形和三角形

文章目录

• 文章参考
• 圆形
• 三角形

文章参考

1. 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

圆形

原理描述：

1. 设置div的高度和宽度是一致的，画出正方形
2. 然后再利用border-radius转为圆形
3. 由于块状元素是占一行，因此将元素改为 inline-block

<span class="point" style="background: #77DC7E;margin-right: 12px;"></span>

.point {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  display: inline-block;
  background: red;
}

由于要设置高度和宽度，因此就需要将 元素改为 inline-block

三角形

原理描述：

1. 一个div的边框实际上是有上、下、左、右四个边框构成，每个边框代表一个小的等边直角三角形
2. 将等边直角三角形拼成我们感兴趣图片
3. 将其余的边框改为透明即可

四个边框如果只设置其中一个边框或者两个边框，浏览器会显示不同的形状，因此要根据浏览器的实际显示为准，如果不确定就按照上面四个边框来拼凑，其他的改为透明即可

<div class="reception-flag"></div>

.reception-flag {
	border-top: 30px solid #7bc6a5;
	border-right: 30px solid #7bc6a5;
	display: inline-block;
	border-left: 30px solid #fff;
	border-bottom: 30px solid #fff;
}

来源：CSDN

作者：胖鹅68

链接：https://blog.csdn.net/hbiao68/article/details/103747056