Create a lightning bolt design (like The Flash)

Question

I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the

Answer 1

Disclaimer: Use SVG for complex images. We can still have some fun with CSS, though, just use this for learning and not production implementation.

Is this possible with a single HTML element?

Yeah! ... with limitations — mainly no border on the bolt... but, hey, minimal HTML!

• The top and bottom sections are created with the transparent border triangle trick on :before and :after
• The middle bolt is created with the box-shadow of :before

Very rough example

Note: This example uses a

, as it requires pseudo-element children.

body {
  background: #F00;
}
div {
  height: 300px;
  width: 300px;
  background: #FFF;
  border-radius: 50%;
  border: solid 5px #000;
  margin-top: 200px;
  position: relative;
}
div:before,
div:after {
  content: '';
  position: absolute;
  transform: skewY(-30deg) rotate(20deg);
}
div:before {
  border-right: solid 70px yellow;
  border-top: solid 160px transparent;
  box-shadow: 50px 100px yellow;
  left: 50%;
  margin-left: -50px;
  top: -70px;
}
div:after {
  border-right: solid 70px transparent;
  border-top: solid 160px yellow;
  bottom: -30px;
  left: 100px;
}

0 讨论(0)

查看其它9个回答

发布评论:

提交评论

---

•  加载中...