Я пытаюсь воссоздать символ молнии от "The Flash (DC Comics)" (или знак на футболке, которую носит Sheldon Cooper из "The Big Bang Theory" ) в CSS.
Этот символ будет действовать, как система звездного рейтинга, но вместо этого будет - "система рейтинга молний".
Однако, поскольку я пытаюсь свести HTML к минимуму, то я бы хотел, чтобы в основном это был стиль CSS.
Ниже пример моего кода:
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
, хотя я не знаю, что у меня уже есть ли до сих пор обработка по этому свойству - в основном потому, что я немного запутался относительно того, что perspective
делает со свойствами :before
и :after
, когда они применяются к родительскому элементу.
Выбрал для этого CSS, так как белый фон и цвет молнии будут меняться при щелчке, и ещё потому, что я знаю, как это сделать с помощью CSS.
Знаю, что SVG может быть лучшим вариантом здесь, но я не смог изучить SVG из-за ограничений по времени, поэтому предпочел бы использовать «то, что я знаю, как использовать», то есть CSS.
Перевод вопроса: Create a lightning bolt design (like The Flash)@jbutler483