我正在尝试在CSS中从Flash（DC漫画）（或Big Bang Theory的Sheldon Cooper穿的T恤）中重新创建闪电符号。
这将像星级评分系统一样，只不过是“闪电评分系统”。
但是，由于我试图将HTML保持在最低水平，因此我只想在CSS中设置样式。
我已经到了以下阶段：
html,
body {
margin: 0;
height: 100%;
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
height: 50vw;
width: 50vw;
position: relative;
margin: 0 auto;
}
.circ:hover{
background:gray;
}
.circ:hover .bolt{
background:gold;
}
.circ {
height: 50%;
width: 50%;
background: white;
border: 5px solid black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow:0 0 10px 2px black;
}
.bolt {
position: absolute;
top: 5%;
left: 50%;
height: 70%;
width: 30%;
background: yellow;
border: 2px solid black;
border-bottom: none;
transform: perspective(200px) skewX(-10deg) rotateX(15deg);
}
.bolt:before {
content: "";
position: absolute;
top: 90%;
left: 20%;
height: 50%;
width: 100%;
background: inherit;
border: 2px solid black;
transform: ;
}
/*
.bolt:after{
content:"";
position:absolute;
top:-40%;left:20%;
height:50%;
width:100%;
background:inherit;
transform:perspective(50px) skewX(-10deg) rotateX(45deg);
}*/<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrap">
<div class="circ">
<div class="bolt"></div>
</div>
</div>但不知道如何从这里继续。
我尝试使用该perspective属性，尽管到目前为止我还没有完全了解它-主要是因为在将其应用于:before和:after属性时，我对它和属性的作用有些困惑父母
我为此选择了CSS，因为白色背景和螺栓颜色将在单击时发生变化，并且因为我知道如何使用CSS来实现。
（我知道SVG在这里可能是一个更好的选择，但是由于时间限制，我无法学习它，因此我更喜欢使用“我知道如何使用”，即CSS）
