Как создать полу дугу [закрыт]

Как создать полу дугу, создаю дугу с помощью border-bottom:1px solid #000; это полная дуга, а как сделать ее половинку(или больше половины), идея такая 30% этой дуги желтая, остальная зеленая.

Ответ

.b-circle{ margin: 15px auto; width: 200px; height: 200px; background: #ccc; border-radius: 50%; overflow: hidden; position: relative; } .b-circle:before{ content: ''; position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); background: #fff; z-index: 1; border-radius: 50%; } .b-circle > span{ position: absolute; } .b-circle > span:nth-of-type(1){ top: 0; height: 50%; width: 100%; /*background: #FD6347;*/ } .b-circle > span:nth-of-type(1):before{ content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: yellow; } .b-circle > span:nth-of-type(1):after{ content: ''; position: absolute; top: 0; left: 30%; width: 70%; height: 100%; background: green; } .b-circle > span:nth-of-type(2){ top: 50%; height: 50%; width: 100%; background: #008080; }