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

#css #css3

        
             
                
                    
                        
                            Закрыт. Данный вопрос необходимо конкретизировать. Ответы
на него в данный момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он был сосредоточен только на одной проблеме, отредактировав его.
                        
                        Закрыт 3 года назад.
                                                                                
           
                
        
Как создать полу дугу, создаю дугу с помощью border-bottom:1px solid #000; это полная
дуга, а как сделать ее половинку(или больше половины), идея такая 30% этой дуги желтая,
остальная зеленая.
    

Ответы

Ответ 1

.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;
}

  
  



Ответ 2

Как вариант 



#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);    
}

    




Ответ 3






Вот так

ps:
 svg это мощь 








это малая часть что можно делать на нём