How to create a semi arc, create an arc using border-bottom:1px solid #000; This is a complete arc, and how to make it a half (or more than half), the idea is 30% of this arc is yellow, the rest is green.

Closed due to the fact that the question is too common for participants Streletz , user194374, Grundy , cy6erGn0m , gecube 6 Jul '16 at 2:08 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • stackoverflow.com/questions/21205652/… - soledar10
  • Stop, this code creates a frame at the bottom of a block with a height of 1 px and a color of # 000. I can assume that you have indicated a border-radius, but in this case you need to make two frames - darkwoolf
  • it is possible in two divs but so that they look like arcs, two. - Denis Kotlyarov

3 answers 3

 .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; } 
 <div class="b-circle"> <span></span> <span></span> </div>

    As an option

     #semiarc { position: relative; width: 200px; height: 200px; border: 10px solid #ff8040; border-radius: 50%; overflow: visible; box-sizing: border-box; } #semiarc > div { position: absolute; width: inherit; height: inherit; border-radius: inherit; box-sizing: inherit; margin: -10px auto auto -10px; border: 10px solid #060; clip: rect(0, 200px, 100px, 0); } 
     <div id="semiarc"> <div></div> </div> 

       <svg> <path fill="none" stroke="#333333" stroke-width="3" d="M10,55 C15,5 100,5 100,55" /> </svg>

      Like this

      ps: svg is power

       <svg width="215px" height="274px" viewBox="0 0 215 274"> <g> <path class="stems" fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498" /> <path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20.031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z" /> </g> <g> <path class="r-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478 C155.46,191.738,159.715,193.485,164.836,193.136z" /> <path class="l-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z" /> </g> </svg>

      This is a small part of what you can do on it.