如下图所示，几种使用纯css实现的图形。最开始正三角形的实现来自掘金小册，依靠数学基础实现图形效果才是真正的王道。
所有图形中，就是关于正无穷符号的实现，参考代码中原元素的宽度计算值不太理解，困惑也在下面代码注释中。
有相关需求可参考实现，代码及简要实现的过程，如下面所示，基本参考自CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦，有部分的修改调整，及实现的探究说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.icon {
display: inline-block;
width: 0;
font-size: 0;
position: relative;
margin-right: 20px;
}
/* 6角形，由上三角和下三角两个三角形叠加实现 */
.six-star {
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 104px solid red;
}
.six-star::after {
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 104px solid red;
position: absolute;
content: "";
top: 30px;
left: -60px;
}
/* 箭头，通过在一个小正方形的前(空白三角)后添加两个三角形，实现 */
.arrow {
width: 40px;
height: 40px;
margin: 0 50px;
background-color: red;
}
.arrow::before {
position: absolute;
left: -50px;
border: solid 20px red;
border-left-width: 50px;
border-left-color: transparent;
content: "";
}
.arrow::after {
position: absolute;
right: -40px;
border: solid 20px transparent;
border-left-color: red;
content: "";
}
/* 吃豆人 用四个border组成原型，将一个border透明 */
.pacman {
width: 0px;
height: 0px;
border-right: 40px solid transparent;
border-top: 40px solid red;
border-left: 40px solid red;
border-bottom: 40px solid red;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.pacman-ext1{
width: 0px;
height: 0px;
border-right: 40px solid transparent;
border-top: 40px solid red;
border-left: 40px solid red;
border-bottom: 40px solid red;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.circle{
width: 0px;
height: 0px;
border: 40px solid red;
border-radius: 50%;
}
.circle2{
width: 80px;
height: 80px;
background-color: red;
border-radius: 50%;
}
.ring{
width: 70px;
height: 70px;
border-radius: 50%;
border:5px solid red;
}
/* 半圆的实现，宽高/高宽的比为1:2 border-radius 大于宽高的最小值*/
.half-circle-up{
width: 80px;
height: 40px;
background-color: red;
border-radius: 999px 999px 0 0;
}
.half-circle-down{
width: 80px;
height: 40px;
background-color: red;
border-radius: 0 0 40px 40px;
}
.half-circle-left{
width: 40px;
height: 80px;
background-color: red;
border-radius: 999px 0px 0 999px;
}
.half-circle-right{
width: 40px;
height: 80px;
background-color: red;
border-radius: 0 999px 999px 0;
}
.bullet{
width: 16px;
height: 70px;
background-color: red;
border-radius: 50% 50% 0 0;
}
/* 顶边三角 */
.triangle-topleft{
width: 0px;
height: 0px;
border-top: 80px solid red;
border-right: 80px solid transparent;
}
.triangle-topright{
width: 0px;
height: 0px;
border-top: 80px solid red;
border-left: 80px solid transparent;
}
.triangle-bottomleft{
width: 0px;
height: 0px;
border-bottom: 80px solid red;
border-right: 80px solid transparent;
}
.triangle-bottomright{
width: 0px;
height: 0px;
border-bottom: 80px solid red;
border-left: 80px solid transparent;
}
/* 平行四边形 */
.parallelogram{
width: 150px;
height: 80px;
margin-left: 40px;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
transform: skew(-45deg);
background-color: red;
}
/* 梯形 正三角形 加 一个宽度*/
.trapezoid{
border-bottom: 104px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
width: 100px;
height: 0px;
}
/* hexagon 六边形 倒梯形底部加个三角形 */
.pentagon{
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
.pentagon:before{
content: "";
position: absolute;
width: 0;
height: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
/* 菱形 两个对三角组成 */
.rhombus{
border-width: 52px 30px 0;
border-style: solid;
border-color: red transparent;
}
.rhombus:before{
content: "";
position: absolute;
width: 0;
height: 0;
top: -104px;
left: -30px;
border-width: 0 30px 52px;
border-style: solid;
border-color: transparent transparent red;
}
/* 无线图标 两个扩展二的水滴对叠在一起 修改为和原元素宽度无关的形式，
第二个伪元素水平移动到右边界的距离translateX为 (width+border-width)平方和开根号，即正方形对角线的长度
*/
.infinity{
width: 80px;
height: 80px;
}
.infinity:before{
width: 60px;
height: 60px;
border: 20px solid red;
position: absolute;
right: 0;
content: "";
border-radius: 50px 50px 0 50px;
transform:rotate(-45deg);
}
.infinity:after{
width: 60px;
height: 60px;
border: 20px solid red;
position: absolute;
content: "";
/* left: auto; */
right: 0;
border-radius: 50px 50px 50px 0;
transform: translateX(113.13px) rotate(45deg); /* 移动到有边界再旋转 */
/* transform: translateX(113.13px);
transform: rotate(45deg); */
}
/* 无线图标 两个扩展二的水滴对叠在一起 通过两个伪元素计算原元素的宽度width，
(width+border-width)平方和开根号，两个对角线长度-border相交斜边的一半。不明白为什么是减斜边一半
*/
/* .infinity{
width: 212px;
height: 100px;
position: relative;
}
.infinity:before,.infinity:after{
width: 60px;
height: 60px;
top: 0;
left: 0;
border: 20px solid red;
position: absolute;
content: "";
border-radius: 50px 50px 0 50px;
transform:rotate(-45deg);
}
.infinity:after{
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform:rotate(45deg);
} */
/* 扩展1 */
.infinity-1{
width: 150px;
height: 100px;
}
.infinity-1:before,.infinity-1:after{
width: 60px;
height: 60px;
top: 0;
left: 0;
border: 20px solid red;
position: absolute;
content: "";
border-radius: 50px 50px 0 50px;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.infinity-1:after{
border-radius: 50px 50px 50px 0;
}
/* 扩展2 水滴形状，一个正方形将四个角变圆实现 */
.infinity-2{
height: 100px;
width: 160px;
}
.infinity-2:before{
width: 60px;
height: 60px;
border: 20px solid red;
position: absolute;
content: "";
border-radius: 50px 50px 0 50px;
transform:rotate(-45deg);
}
/* 扩展3 水滴形状，border的四个角变圆实现 */
.infinity-3{
border: 20px solid red;
border-radius: 100% 100% 0 100%;
transform: rotate(-45deg);
}
/* 扩展4 */
.infinity-4{
width: 212px;
height: 100px;
}
.infinity-4:before,.infinity-4:after{
width: 60px;
height: 60px;
border: 20px solid red;
position: absolute;
content: "";
border-radius: 50px 50px 0 50px;
transform:rotate(-45deg);
}
.infinity-4:after{
border-radius: 50px 50px 50px 0;
transform:rotate(45deg);
}
/* 鸡蛋 */
.egg{
width: 126px;
height: 180px;
background-color: red;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/* 等同
border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;
border-bottom-right-radius: 50% 40%;
border-bottom-left-radius: 50% 40%; */
}
/* 五角星 两个低腰三角形叠加形成四角，再加个单独的三角 */
.five-star{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
-moz-transfrom:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
transform:rotate(35deg);
}
.five-star:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
position: absolute;
top: -45px;
left: -65px;
content: "";
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);
transform:rotate(-35deg);
}
.five-star:after{
width: 0;
height: 0;
position: absolute;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
content: "";
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
transform:rotate(-70deg);
}
/* 分享箭头 */
.share-arrow{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
-moz-transfrom:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.share-arrow:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
position: absolute;
top: -47px;
left: -63px;
content: "";
-moz-transform:rotate(-33deg);
-webkit-transform:rotate(-33deg);
-ms-transform:rotate(-33deg);
-o-transform:rotate(-33deg);
transform:rotate(-33deg);
}
/* 试管帽 */
.circle-single-end {
width: 50px;
height: 80px;
background-color: red;
border-radius: 999px 999px 0 0; /* 任意非常大的值 */
}
.pill-shape {
width: 40px;
height: 80px;
background-color: red;
border-radius: 999px; /* 任意非常大的值，或 999rem */
}
.circle-single-end-2 {
width: 150px;
height: 80px;
background-color: red;
border-radius: 50px 50px 0 0; /* 50px像素是一个很好的像素值 */
}
/* 心形 由两个一头为圆的长方体倾斜相交组成*/
.heart-shape{
top: -80px;
}
.heart-shape:before,.heart-shape:after{
width: 50px;
height: 80px;
left: 50px;
background-color: red;
position: absolute;
content: "";
border-radius: 50px 50px 0 0;
}
.heart-shape:before{
/* 以圆心的尖为中心逆时针旋转45度 */
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.heart-shape:after{
left: 0;
/* 以圆心的尖为中心顺时针旋转45度 */
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* 钻石 梯形加三角形组成 */
.diamond{
transform: translateY(-70px);
width: 50px;
height: 0;
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
}
.diamond:after{
top: 25px;
left: -25px;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
position: absolute;
content: "";
}
/* 两个颜色的半圆组成的圆球 */
.two-color-boll{
width: 12px;
height: 12px;
background-color: #fff;
border: 18px solid;
border-radius: 100%;
}
/* cs光盘形状 */
.cd-shape{
width: 12px;
height: 12px;
background-color: #fff;
border: 18px solid;
border-radius: 100%;
}
/* 太极图 由两个颜色的圆球+cd光盘形状 组合而成 */
.yin-yang{
width: 96px;
height: 48px;
background-color: #fff;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
}
.yin-yang:before {
width: 12px;
height: 12px;
top: 50%;
left: 0;
content: "";
position: absolute;
background-color: #fff;
border: 18px solid;
border-radius: 100%;
}
.yin-yang:after {
width: 12px;
height: 12px;
top: 50%;
left: 50%;
background-color: #151313;
border: 18px solid #fff;
border-radius:100%;
content: "";
position: absolute;
}
/* 由太极演变出来的收音机盒子效果 */
.radio-box{
width: 96px;
background-color: #151313;
border-style: solid;
border-width: 2px 2px 50px 2px;
}
.radio-box:before {
width: 12px;
height: 12px;
top: 50%;
left: 0;
content: "";
position: absolute;
background-color: #151313;
border: 18px solid #fff;
border-radius: 100%;
}
.radio-box:after {
width: 12px;
height: 12px;
top: 50%;
left: 50%;
background-color: #151313;
border: 18px solid #fff;
border-radius:100%;
content: "";
position: absolute;
}
</style>
</head>
<body>
<div class="icon six-star"></div>
<div class="icon arrow"></div>
<div class="icon pacman"></div>
<div class="icon pacman-ext1"></div>
<div class="icon circle"></div>
<div class="icon circle2"></div>
<div class="icon ring"></div>
<br><br><br>
<div class="icon half-circle-up"></div>
<div class="icon half-circle-down"></div>
<div class="icon half-circle-left"></div>
<div class="icon half-circle-right"></div>
<div class="icon bullet"></div>
<div class="icon triangle-topleft"></div>
<div class="icon triangle-topright"></div>
<div class="icon triangle-bottomleft"></div>
<div class="icon triangle-bottomright"></div>
<br><br><br>
<div class="icon parallelogram"></div>
<div class="icon trapezoid"></div>
<div class="icon pentagon"></div>
<div class="icon rhombus"></div>
<div class="icon infinity"></div>
<br><br>
<div class="icon infinity-1"></div>
<div class="icon infinity-2"></div>
<div class="icon infinity-3"></div>
<div class="icon infinity-4"></div>
<div class="icon egg"></div>
<br><br><br><br><br>
<div class="icon five-star"></div>
<div class="icon share-arrow"></div>
<div class="icon circle-single-end"></div>
<div class="icon pill-shape"></div>
<div class="icon circle-single-end-2"></div>
<div class="icon heart-shape"></div>
<br><br><br><br><br>
<div class="icon diamond"></div>
<div class="icon two-color-boll"></div>
<div class="icon cd-shape"></div>
<div class="icon yin-yang"></div>
<div class="icon radio-box"></div>
</body>
</html>
