How to split css shape in half vertically?

Question

Here is my code:

http://jsfiddle.net/pnpHS/4/

As you can see, it's a yellow CSS shape.

.yellow {
  height: 120px;
  width: 50px;
  border-radius: 20px / 65px;
  -moz-border-radius: 20px / 65px;
  -webkit-border-radius: 20px / 65px;
  background: #FDD424;
  margin-top: 20px;
  margin-left: 20px;
}

<div class="yellow"></div>

How can I make it so it's split in two vertically so the left side is that yellow colour but the other is transparent?

Answer 1

There are quite a lot of limitations of what kind of shapes you can do while using a single element only (if you wrap it around another element, you can just use overflow hidden to wrap it).

To achieve it with a single element, you can do it by:

• Set background color to transparent
• Set a border-left to 50% of the element's width, using a solid color as the color of the previous background color.

example: http://jsfiddle.net/pKuj9/

.yellow {
  height: 120px;
  width: 50px;
  border-radius: 20px / 65px;
  -moz-border-radius: 20px / 65px;
  -webkit-border-radius: 20px / 65px;
  background: transparent;
  margin-top: 20px;
  margin-left: 20px;
  border-left: 25px solid #FDD424;
}

<div class="yellow"></div>