创建闪电设计（如Flash） [英] Create a lightning bolt design (like The Flash)

问题描述

我试图在CSS中重新创建闪电符号（DC漫画）（或大爆炸理论佩戴的大爆炸理论的谢尔顿·库珀）。

I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the T-shirt worn by Big Bang Theory's Sheldon Cooper) in CSS.

这将是一个星级评分系统，只是一个闪电评级系统。

This is going to act like a star rating system, only a 'lightning rating system' instead.

尝试将HTML保持为最小值，我想在CSS中对此样式进行设置。

However, since I'm trying to keep the HTML to a minimum, I'd like to style this in CSS only.

我已经进入了以下阶段：

I have got to the stage of:

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>

知道如何从这里继续。

我尝试使用透视属性，我还有一个句柄，因为至今 - 主要是因为我对于：和之前的操作有些困惑。 ：

I've attempted using the perspective property, although I don't think I've quite got a handle on it as of yet - mainly because I'm slightly confused as to what it is doing to the :before and :after properties when it is applied to the parent.

我选择了CSS作为白色背景，并且螺栓颜色将改变点击，因为我知道如何用CSS。

I have chosen CSS for this as the white background and bolt colour will be changing on click, and because I know how to do that with CSS.

（我知道SVG可能是一个更好的选择，但我还没有能够学习这是因为时间限制，所以我宁愿使用我知道如何使用，这是，CSS）

(I know SVG may be a better option here, but I have not been able to learn this due to time restrictions, so I'd prefer to use 'what I know how to use', which is, CSS)

推荐答案

在这里，您可以参加 @ Professor.CSS 。 @ jbutler483

圈子

和多边形

SVG

Here you go @Professor.CSS. @jbutler483
A Circle
And Polygon

svg {
  background-color: red;
}

<svg width="100px" height="200px" viewBox="0 0 100 150">
  <circle fill="white" stroke="black" cx="50" cy="75" r="50"></circle>
  <polygon stroke="gray" fill="yellow" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
</svg>

它在灯光上只是 :: before 和 :: after 元素。
drop-shadow 。

Its just ::before and ::after elements on the lighting. drop-shadow on the lighting container.

body {
  background-color: red;
}
.container {
  -webkit-filter: drop-shadow(2px 2px 0px gray);
}
.circle {
  display: inline-block;
  border-radius: 50%;
  background-color: white;
  border: 5px solid black;
  border-color: black;
}
.lightning {
  position: relative;
  margin: 50px;
  width: 30px;
  height: 50px;
  transform-origin: 50% 50%;
  transform: skewX(-30deg) skewY(-30deg) rotate(10deg);
  background-color: yellow;
}
.lightning:before {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent yellow transparent;
  top: -39px;
  left: -17px;
  content: "";
}
.lightning:after {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent transparent yellow;
  bottom: -39px;
  right: -17px;
  content: "";
}

<div class="circle">
  <div class="container">
    <div class="lightning"></div>
  </div>
</div>

这篇关于创建闪电设计（如Flash）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！