How to make a semicircular background in css

Question

Is it possible to make a pure css background for half a square, as in the image. I know that this can be done with the image as a background, but I need to use 5 different colors, and maybe in the future the colors can be changed.

Answer 1

If your divs are fixed sizes, you can use borders to create two triangles, as described in How do CSS triangles work? :

div{ display:inline-block; border-top:100px solid red; border-right:100px solid grey; } 

 <div></div> 

To make other sizes, colors, you need to adjust the border properties:

 div { display: inline-block; } div:nth-child(1) { border-right: 100px solid red; border-top: 100px solid grey; } div:nth-child(2) { border-left: 100px solid red; border-top: 100px solid grey; } div:nth-child(3) { border-right: 50px solid red; border-top: 100px solid grey; } div:nth-child(4) { border-right: 100px solid red; border-bottom: 50px solid grey; } 

 <div></div> <div></div> <div></div> <div></div> <div></div> 

Answer 2

You can also try linear-gradients

 div { width: 200px; height: 200px; background: rgba(248, 80, 50, 1); background: -webkit-gradient(linear, left top, right bottom, color-stop(1%, grey), color-stop(52%, grey), color-stop(52%, red), color-stop(52%, red), color-stop(100%, red)); background: -moz-gradient(linear, left top, right bottom, color-stop(1%, grey), color-stop(52%, grey), color-stop(52%, red), color-stop(52%, red), color-stop(100%, red)); background: -o-gradient(linear, left top, right bottom, color-stop(1%, grey), color-stop(52%, grey), color-stop(52%, red), color-stop(52%, red), color-stop(100%, red)); background: gradient(linear, left top, right bottom, color-stop(1%, grey), color-stop(52%, grey), color-stop(52%, red), color-stop(52%, red), color-stop(100%, red)); } 

 <div></div> 

Answer 3

You can use the conversion if you do not need to worry about the old browser support.

 .container { position: relative; overflow: hidden; width: 100px; } .square { width: 100px; height: 100px; background-color: #E30606; } .overlay { width: 171px; height: 72px; background-color: #D0CBCB; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } 

 <div class="container"> <div class="square"> <div class="overlay"></div> </div> </div> 

http://jsfiddle.net/hT9vP/13/