<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * {margin: 0; padding: 0;} .clearfix{zoom:1;/*为IE6,7的兼容性设置*/} .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; } ul li { list-style: none; float: left; margin: 50px 0 50px 20px; text-align: center; } li { background: red; } h2 { margin-top: 20px; } .circle1 { width: 100px; height: 50px; border-radius: 50px 50px 0 0; line-height: 50px; } .circle2 { width: 50px; height: 100px; border-radius: 0 50px 50px 0; line-height: 100px; } .circle3 { width: 100px; height: 50px; border-radius: 0 0px 50px 50px; line-height: 50px; } .circle4 { width: 50px; height: 100px; border-radius: 50px 0 0 50px; Line-height : 100px ; } .circle5 { width : 100px ; height : 100px ; border-RADIUS : 50px ; Line-height : 100px ; } .demo { / * left semicircle * / position : Absolute ; / * Clip property tailoring absolutely positioned elements. In other words, only the position: absolute time is in effect. * / Width : 100px ; height : 100px; Border-RADIUS : 50px ; / * Line-height: 50px; * / Clip : RECT (0px 50px 100px 0px) ; / * only legitimate shape value is: RECT (Top, right, bottom, left) * / } . right-Circle { / * right semicircle * / left : 200px ; Clip : RECT (0px 100px 100px 50px) ; / * only legitimate shape value is: RECT (Top, right, bottom, left) * / } </ style > </ head > < body > <div > < H2 > implemented semicircle with border-RADIUS </ H2 > < UL class = "clearfix" > < Li class = "CIRCLE1" > upper circle </ Li > < Li class = "CIRCLE2" > left circular </ Li > < Li class = "circle3 do" > lower circle </ Li > < Li class = "circle4" > left circular </ > < class = "circle5" > full circle </ Li > </ UL > < HR > < H2 > CSS3 the clip method of tailoring to achieve a semicircular </ H2 > < P style = "Color: Red;" > clip property tailoring absolute positioning element . In other words, only the position: absolute time is in effect. Shape is the only legal value: RECT (Top, right, bottom, left) </ P > < UL class = "clearfix" style = "position: relative;" > < Li class = "Demo" > left semicircle < li class="demo right-circle">右半圆</li> <li></li> </ul> </div> </body> </html>
Renderings:
Interested friends can go try it cooked! ! !