今天我们通过前面所学的知识来画个八卦图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>八卦图</title>
</head>
<body>
<div class="bagua"></div>
<style>
body{
background-color: #ccc;
}
.bagua{
width:150px;
height: 300px;
background-color: #000;
border-radius: 50%;
margin: 100px auto;
border-left: 150px solid #fff;
position: relative;
}
.bagua::before{
content: "";
width: 0px;
height: 0px;
padding: 25px;
border: 50px solid #000;
background-color:#fff;
border-radius: 50%;
position: absolute;
left: -75px;
}
.bagua::after{
content: "";
width: 0px;
height: 0px;
padding: 25px;
border: 50px solid #fff;
background-color:#000;
border-radius: 50%;
position: absolute;
left: -75px;
bottom: 0;
}
</style>
</body>
</html>
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
