CODEWITHSUNDEEP
cssshapes
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Creating CSS3 shapes round corner?

I know i can create in CSS a lot of round corners, but i have never created something like this

enter image description here

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?

Upvotes: 1

Views: 53

Answers (2)

Alex M
Alex M

Reputation: 2836

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.

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 2

Related Questions