Reputation: 229
I have been looking for a while to figure out how to recreate the below image forms in css but no source that leads me to a win.
The below image show what I'm trying to achieve
Upvotes: 1
Views: 1222
Reputation: 2438
Stewertside has already shown the most apt. option, i.e. SVG, besides using an image.
Another option is radial gradients which victor and stewertside have shown.
Yet another option is box-shadow, which allows to create any no. of shadows, and also allows for their positioning.
An example using box-shadow and overflow hidden:
div {
height: 100px;
width: 600px;
position: relative;
overflow: hidden;
}
div:before {
position: absolute;
content: "";
height: 200px;
width: 820px;
border-radius: 50%;
left: -200px;
top: 8px;
box-shadow: 70px 70px 0px 70px #8BC74A, 35px 68px 0px 100px #96292D, 0 0 0 120px #700810;
}
<div>
</div>
Upvotes: 2
Reputation: 20935
This is possible with CSS gradients but I would really recommend using an SVG alternative as the lines in CSS will be jagged
div {
border: 2px solid black;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 55%, rgba(38, 155, 3, 1) 50%, rgba(38, 155, 3, 1) 56%, rgba(38, 155, 3, 1) 57%, rgba(38, 155, 3, 1) 58%, rgba(169, 3, 41, 1) 60%, rgba(169, 3, 41, 1) 67%, rgba(169, 3, 41, 1) 68%, rgba(109, 0, 25, 1) 69%, rgba(109, 0, 25, 1) 100%);
background-position: -325px -5px;
background-size: 700px 300px;
width: 200px;
height: 200px;
<div></div>
This is pretty close to what you are looking to achieve and with a little more co-ordinate moving it should be what you're looking for.
SVG is well supported and once you understand the methods and co-ordinate structure you can get things looking perfect and also have them be fully responsive.
<svg width="100%" preserveAspectRation="none" viewbox="0 0 400 200">
<path d="M0,5 Q400,40 400,90 L400,0z" fill="#8BC74A"></path>
<path d="M0,10 Q400,20 400,80 L400,0 L0,0z" fill="#96292D"></path>
<path d="M0,0 Q400,0 400,40 L400,0z" fill="#700810"></path>
</svg>
Upvotes: 4
Reputation: 9269
Look into overlying several elliptical gradients as background images:
background-image: radial-gradient(...),
radial-gradient(...),
radial-gradient(...);
Upvotes: 0