<html>
<head>
<meta http-equiv="Content-Type"
c/>
<style>
#yin-yang {
width: 200;
height: 100;
background: #EEE;
border-color: red;
border-style: solid;
border-width: 2px
2px
100 2px;
border-radius: 100%;
position: relative;
/**作为子元素的定位父元素,也就是说,如果某个元素相对定位了,那其下的子孙元素,在没有其他定位元素隔离的情况下,将以这个父元素的包围框为基准做绝对定位。**/
}
#yin-yang:before
{
content: "";
position: absolute;
top: 50%;
left: 0;
background: #EEE;
border: 40px
solid red;
border-radius: 100%;
width: 20px;
height: 20px;
}
#yin-yang:after
{
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 40px
solid #EEE;
border-radius: 100%;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div
id="yin-yang"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" c/>
<style>
#yin-yang {
width: 100;
height: 200;
background: #EEE;
border-color: red;
border-style: solid;
border-width: 2px 2px 2px 100;
border-radius: 100%;
position: relative;
/**作为子元素的定位父元素,也就是说,如果某个元素相对定位了,那其下的子孙元素,在没有其他定位元素隔离的情况下,将以这个父元素的包围框为基准做绝对定位。**/
}
#yin-yang:before {
content: "";
position: absolute;
top: 0;
left: -50%;
background: #EEE;
border: 40px solid red;
border-radius: 100%;
width: 20px;
height: 20px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: -50%;
background: red;
border: 40px solid #EEE;
border-radius: 100%;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>