-5

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

enter image description here

Harry
  • 87,580
  • 25
  • 202
  • 214
user3148906
  • 99
  • 3
  • 10
  • 3
    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
  • yes I did using js fiddle https://jsfiddle.net/tmjLet8u/ – user3148906 Mar 12 '15 at 15:35
  • but not getting exact curve as in image – user3148906 Mar 12 '15 at 15:37
  • @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
  • Ok thanks for sharing George Stocker – user3148906 Mar 12 '15 at 15:48
  • @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
  • 1
    @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

1 Answers1

4

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

jbutler483
  • 24,074
  • 9
  • 92
  • 145