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, Jan 19 '16 at 14:35
Related to (and possibly a duplicate of) http://stackoverflow.com/questions/8503636/transparent-half-circle-cut-out-of-a-div — Harry, Jan 19 '16 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, Jan 19 '16 at 14:40
I already make it transparent, but it still doesnt trim the red shape. — firstpersoncode, Jan 19 '16 at 14:47
ooww, someone already solve this question ! okaay, thanks guys.. — firstpersoncode, Jan 19 '16 at 14:52
@NasserMaronie: Did you have a look at the thread I linked above. There are many more such - http://stackoverflow.com/questions/16388078/is-a-concave-border-radius-possible, http://stackoverflow.com/questions/25487069/is-a-css-arch-using-border-radius-possible, http://stackoverflow.com/questions/25914363/how-can-i-create-a-concave-bottom-border-in-css — Harry, Jan 19 '16 at 14:52
@Harry yeah thanks sir.. anyway, my html was wrong hahaha.. i forgot to change the div class.. it was html code from my sublime text that i work on it right now hahahha. ok. thanks again :) — firstpersoncode, Jan 19 '16 at 14:56

score 1 · Accepted Answer · answered Jan 19 '16 at 15:09

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>

score 1 · Answer 2 · answered Jan 20 '16 at 13:04

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>

Create a curve shape using css?

2 Answers2

CSS Radial Gradient