Create a curve shape using css?

Question

i really need your help..

did anyone know how to make a shape like this using css?

i tried to make it, but now i stuck..

Here's the css style and HTML

.a {
  width: 20%;
  height: 500px;
  background-color: red;
  display: inline-block;
  margin: 0;
}
.b {
  display: inline-block;
  position: absolute;
  width: 20%;
  height: 500px;
  background-color: black;
  margin: 0;
  border-radius: 50% 0 0 50%;
  left: 20%;
}

<div id="container">
  <div class="a">
    ...
  </div>
  <div class="b">
    ...
  </div>
</div>

what's the problem? you appear to have created the same shape in your picture... — Marc B
– Marc B, Commented Jan 19, 2016 at 14:35
Related to (and possibly a duplicate of) stackoverflow.com/questions/8503636/… — Harry
– Harry, Commented Jan 19, 2016 at 14:36
@liam_g: The html tag doesn't really make much of a difference to this question. Not sure why you had suggested that alone as an edit when there are multiple other things to be fixed in the post. — Harry
– Harry, Commented Jan 19, 2016 at 14:40
I already make it transparent, but it still doesnt trim the red shape. — firstpersoncode
– firstpersoncode, Commented Jan 19, 2016 at 14:47
ooww, someone already solve this question ! okaay, thanks guys.. — firstpersoncode
– firstpersoncode, Commented Jan 19, 2016 at 14:52

Stewartside · Accepted Answer · 2016-01-19 15:09:57Z

1

CSS Radial Gradient

One way to achieve this would be to use a radial gradient background. This will also make your background transparent in the area you require so it should be to your requirements.

body {
  background: lightblue;
}
div {
  background: radial-gradient(circle at 250% 25%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, red 50%, red 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 100% 200%;
  height: 400px;
  width: 200px;
}

<div>Text</div>

answered Jan 19, 2016 at 15:09

Stewartside

21k13 gold badges64 silver badges82 bronze badges

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

Comments

Gildas.Tambo · Accepted Answer · 2016-01-20 13:04:11Z

1

An other way to achieve this would be to use css-Shadow and pseudo-elements

div {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    height: 400px;
    width: 200px;
}

div:before{
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    box-shadow: 0 0 0 200px red;
    height: 100%;
    width: 100%;
    border-radius:50%;
}

<div></div>

answered Jan 20, 2016 at 13:04

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Collectives™ on Stack Overflow

Create a curve shape using css?

2 Answers 2

CSS Radial Gradient

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

CSS Radial Gradient

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related