1. Zuhause
  2. Frage und Antwort
  3. Benötigen Sie CSS für halb gefüllten Kreis mit vollständigen Rahmen

Benötigen Sie CSS für halb gefüllten Kreis mit vollständigen Rahmen

2017-02-28 6 views

Antwort

0

Dies ist, wie Sie es in CSS erreichen können.

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

Quelle

2017-02-28 17:21:27

0 
<!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>

Quelle

2017-02-28 19:42:22 EddyG

Verwandte Themen

 Verwandte Themen