CSS Square Div with an Inward Oval Shape

Question

I am trying to create a div in css with an inward oval shape to it like this.

At the moment, I have a shape that is outward instead of inward (JS Fiddle Link).

.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}

Any ideas on how to go about this?

Christoph · Accepted Answer · 2013-11-11 21:57:50Z

2

Have a look at my example fiddle.

I used a pseudo-element and some elliptical border-radius coupled with an inset box-shadow.

div {
    position:relative;
    width: 200px;height: 100px;
    background: #CC0000;
    background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
div:after {
    position:absolute;content:"";
    width: 100%;height: 95%;
    background: #222;
    box-shadow:inset 10px -10px 5px -10px #000;
    border-radius: 0 0 0 200px / 100px;
}

With a little more effort, one could probably get closer to your result, but this might be a good starting point.

edited Nov 11, 2013 at 21:57

answered Nov 11, 2013 at 21:51

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kumud Sinha · Accepted Answer · 2013-11-11 20:52:39Z

I have created this fiddle for you. Here is the code:

HTML

<div class="container">
    <div class="shape"></div>
</div>

CSS

.container {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
.shape {
width: 100px;
height: 50px;
border: none;
background: #000000;
border-radius: 0 0 0 90px;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
}

TreeTree · Accepted Answer · 2013-11-11 20:53:06Z

If the part of the graphic that "isn't there" doesn't have to be actually transparent, then you can just make a regular rectangle, and build a curved shape that will sit on top of the rectangle and has the same color as the background.

http://jsfiddle.net/ub8fM/1/

.shape {
    float: left;
    width: 100px;
    height: 50px;
    border: none;
    background: #CC0000;
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000));
    background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
    background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
    background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
    background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
    background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
    position:relative;
}

.shape:before {
    border-radius: 0 90px 0 0;
    -moz-border-radius: 0 90px 0 0;
    -webkit-border-radius: 0 90px 0 0;
    content:'';
    position:absolute;
    top:0;
    left:0;
    background:white;
    width:100%;
    height:100%;
}

Having the shadow would a bit harder and I have no solution for that yet.

Also jsfiddle has a tidy up button that's super useful.

Collectives™ on Stack Overflow

CSS Square Div with an Inward Oval Shape

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related