Reputation: 97
I'm trying to recreate this image with svg
:
Here is fiddle:http://jsfiddle.net/g7kgdo8u/
But I need this image with css.
Is it possible?
Upvotes: 1
Views: 4626
Reputation: 274384
You can also do it with a radial-gradient
:
.box {
width:300px;
height:100px;
background:
radial-gradient(circle at 50% -300%,blue 90%,transparent 90.5%),
radial-gradient(circle at 60% -300%,grey 90%,transparent 90.5%);
}
<div class="box"></div>
Upvotes: 2
Reputation: 1457
You can use border-bottom-left-radius
and border-bottom-right-radius
div {
background-color: lightgrey;
height: 55px;
width: 300px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 50%;
}
div:after {
content:"";
display: block;
background-color: cornflowerblue;
height: 50px;
width: 300px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div></div>
Upvotes: 3