Search code examples
csscss-shapes

Two overlapping oval shapes - visible artifacts

I have a square div with rounded corners. Inside this div, I need to make this shape:

Example shape

I want to do it with pure css, but there are two problems:

  1. Little 1px green artifacts I can't get rid off (you can see them on the bottom and right sides)

  2. I need a 1px red border around #login_form to also appear on top of my oval shapes.

Maybe there is a better way to cut the ovals.

Here is a jsfiddle of the below: 

#login_form {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  border: 1px solid black;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
#white_ovale {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 125px;
  height: 80px;
  background: white;
  -webkit-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
  -moz-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
  border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
#green_ovale {
  position: absolute;
  right: -21px;
  bottom: -21px;
  width: 139px;
  height: 75px;
  border: 0px;
  background: #72B038;
  -webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
  -moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
  border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
  -webkit-box-shadow: inset -10px -10px 0px 10px white;
  -moz-box-shadow: inset -10px -10px 0px 10px white;
  box-shadow: inset -10px -10px 0px 10px white;
}
<div id="login_form">
  <div id="white_ovale"></div>
  <div id="green_ovale"></div>
</div>

Solution
    1. you need overflow: hidden
    2. you need a 3rd inner div which adds the border (Just think of an independent border that stacks i top of the others)

    BTW: Don't id everthing. Use classes. Use id only if you need to. And try not the nest ids.
    As a rule of thumb I use only class for CSS and idfor JS only

    http://jsfiddle.net/Lt4x3ufg/1/

    .login_form {
    margin-left:auto;
    margin-right:auto;
    
    position: relative;
    width: 200px;
    height: 200px;
    background: red;
    border:1px solid red;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
}
.login_form .border {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 1px solid red;
    border-radius: 10px;
}
.login_form .white_ovale {
	position: absolute;
	right: -10px;
	bottom: -10px;
    width: 125px;
    height: 80px;
    background: white;
    -webkit-border-radius: 
               225px 0px 7px 0px / 150px 0px 7px 0px; 
    -moz-border-radius:
               225px 0px 7px 0px / 150px 0px 7px 0px; 
    border-radius:
               225px 0px 7px 0px / 150px 0px 7px 0px; 
}

.login_form .green_ovale {
	position: absolute;
	right:  -21px;
	bottom: -21px;
    width:  139px;
    height: 75px;
    border: 0px;
    background: #72B038;

    -webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 
       -moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 
            border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 

    -webkit-box-shadow: inset -10px -10px 0px 10px white;
	   -moz-box-shadow: inset -10px -10px 0px 10px white;
	        box-shadow: inset -10px -10px 0px 10px white;
}
    <div class="login_form">
    <div class="white_ovale"></div>
    <div class="green_ovale"></div>
    <div class="border"></div>
</div>