A silly little CSS3 thing

Just playing around and doodling with some CSS3 stuff and came up with this.  Nothing special, but it does show some of the cool things you can do just using CSS and one element.  I need to explore this further – more to come soon, hopefully (when I’ve managed to get my head around it further).


Here’s the HTML:-

<div class="bigcircle">

And, here’s the CSS:-

  .bigcircle {
  width: 0px;
  height: 0px;
  border-right: 60px solid #599ebc;
  border-top: 60px solid #a75bc2;
  border-left: 60px solid #f4fd71;
  border-bottom: 60px solid #ffbd72;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  box-shadow: 3px 3px 9px #27242a;

.bigcircle:before {
  width: 80px;
  height: 80px;
  display: block;
  position: relative;
  top: -42px;
  left: -42px;
  border-radius: 50px;
  background-color: white;
  border: 2px solid black;

.bigcircle:after {
  display: block;
  border-left:25px solid #f86f7f;
  border-top: 25px solid #ffd072;
  border-bottom: 25px solid #9160c4;
  border-right: 25px solid #7fe265;
  -webkit-transform: rotate(45deg);
  position: relative;
  top: -109px;
  left: -25px;
  box-shadow; 5px 5px 5px black;
  z-index: 1000;

I’ve only tested in Chrome. Here it is on Codepen.

Leave a Reply

Your email address will not be published. Required fields are marked *