How to create a half oak



  • How to create a half oak, create an oak with help border-bottom:1px solid #000; It's a total oak, and how to make her half (or more than half) the idea is that 30% of that oak is yellow, the rest is green.



  • 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>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2