需要CSS半完成的边界与完整的边界

2017-02-28 150 views -3 likes

-3

我希望CSS半圆与圆边框。需要CSS半完成的边界与完整的边界

enter image description here

来源

2017-02-28 Amit

然后你需要发布http://stackoverflow.com/help/mcve最小，完整，可验证的例子作为你的代码是不完整的。 – Roy

回答

这是你如何在CSS实现它。

.wrapper{ 
 
    width: 100px; height: 100px; 
 
    border-radius: 50%; 
 
    border: 3px solid black; 
 
    overflow: hidden; 
 
} 
 

 
.one{ 
 
    display: inline-block; 
 
    background-color: green; 
 
    height: 100px; width:50px; 
 
    border-right: 2px solid black; 
 
} 
 

 
.two{ 
 
    display: inline-block; 
 
    background-color: white; 
 
    height: 100px; width:50px; 
 
}

<div class="wrapper"> 
 
<div class="one"></div> 
 
<div class="two"></div> 
 
</div>

来源

2017-02-28 17:21:27

<!DOCTYPE html> 
<html> 
<head></head> 
<style> 
#circle { 
    border-radius: 100%; 
    height: 100px; 
    width: 100px; 
    border: solid black 3px; 
} 


#p1 { 
    border-top-left-radius: 50px; 
    border-bottom-left-radius: 50px; 
    background-color: green; 
    width: 49%; 
    height: 100%; 
    border-right: solid black 2px; 
} 
</style> 
<body> 
    <div id="circle"> 
     <div id="p1"></div> 
    </div> 
</body> 
</html>

来源

2017-02-28 19:42:22 EddyG

需要CSS半完成的边界与完整的边界

回答

相关问题