How to create these shapes using CSS3

Question

I am creating a responsive website. I want to create below shape in CSS3. using ul li.

enter image description here

Have you tried anything? Do you have any code to show? Are you expecting someone here to just write the code for you? — BRBT, Mar 12 '15 at 15:11
@BigRabbit - apparently, based on comments by George Stocker [here](http://stackoverflow.com/questions/28673567/how-do-i-draw-an-incomplete-circle-with-css-and-in-it-how-to-put-a-picture), questions like these are on-topic as-is now... — LittleBobbyTables - Au Revoir, Mar 12 '15 at 15:30
@LittleBobbyTables I don't agree with this at all. Since when did this become a free labour job board? — BRBT, Mar 12 '15 at 15:43
@LittleBobbyTables, I tried a lot to achieve this. I just needed some help to achieve this, nothing more than that. This is not a paid assignment. — user3148906, Mar 12 '15 at 15:51
@user3148906: As indicated in the comment by George, showing code is not mandatory but doing so always helps. It atleast demonstrates to potential answerers that you understand the basics and would be able to decipher the answer. Coming to the question itself, it might be a better idea to use a pseudo-element spanning the entire width, make it into an ellipse using `border-radius` and then position it below the list elements. — Harry, Mar 12 '15 at 16:34
Harry, thanks a lot for your help. It actually increased my knowledge of using pseudo-element. — user3148906, Mar 12 '15 at 17:35

jbutler483 · Answer 1 · 2015-03-13T09:30:01.343

you could use a pseudo element, and have overflow:hidden set on the parent container.

html {
  margin: 0;
  padding: 0;
  background: #222;
}
.wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: #222;
  overflow: hidden;
}
.wrap div {
  display: inline-block;
  position: relative;
  height: 100%;
  width: 22%;
  margin-left: 2%;
  background: lightblue;
  transition: all 0.6s;
  line-height:200px;
  text-align:center;
}
.wrap:before {
  content: "";
  position: absolute;
  bottom: -25%;
  left: 0;
  height: 50%;
  width: 100%;
  border-radius: 50%;
  background: #222;
  z-index: 8;
}
div.withImage {
  background: url(http://placekitten.com/g/300/300);
  background-size: 100% 100%;
}
.wrap div:hover:before {
  opacity: 1;
}
.wrap div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: blue;
  opacity: 0;
  transition: all 0.6s;
}

<div class="wrap">
  <div>ONE</div>
  <div>TWO</div>
  <div>THREE</div>
  <div class="withImage">FOUR</div>
</div>

NOTE

This has been done using Divs. I have left it as an exercise for the OP to alter this code for ul li.

This can also be altered to include Dynamically added elements: JSFIDDLE

How to create these shapes using CSS3

1 Answers1

NOTE