Creating CSS3 shapes round corner? - css

Question

I know i can create in CSS a lot of round corners, but i have never created something like this
I don't need styling for fonts, and heading only for left corner, it is possible to make it like this?
I know i can create moon like this, maybe this is the way?
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
I think it has to be before pseudo class?
Any idea how to make it like my picture?

Answer 1

i guess you want something like this
jsfiddle
just create and element with :before, and make it oval.
to make it oval you need to set border-radius:100%; and the element should have a rectangle form... not a square form.
and then some minor position adjustments.
for this solution to work the background-color of the container where your element is situated ( in this case body ) needs to be the same as the background-color of the :before element
body {
background:#fff;
}
h2 {
color:#fff;
font-size:20px;
padding:10px;
width:200px;
text-align:right;
background:blue;
text-transform:uppercase;
position:relative;
}
h2:before {
position:absolute;
content:"";
background:#fff;
height:120%;
width:50px;
border-radius: 100%;
left:-25px;
top:-10%;
}
<h2>
Predictions
</h2>

Answer 2

You can use radial-gradient for background property of your element without any extra elements or pseudo-elements:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 26px at 0% 50%, transparent, transparent 25px, #0000ff);
}
<div class="shape">Predictions</div>
More over, you can play with parameters of radial-gradient to get any required arc:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 41px at -13% 50%, transparent, transparent 40px, #0000ff);
}
<div class="shape">Predictions</div>
Please look at the jsFiddle.