0
点赞
收藏
分享

微信扫一扫

CSS 3.0实现八卦图


利用CSS实现一个八卦图,效果如下:

CSS 3.0实现八卦图_前端开发

实现代码如下: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>CSS实现八卦图</title>
<style>
#circle {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 50px;
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 50px solid red;
border-left: 2px solid red;
border-radius: 100px;

}

#circle::after {
content: '';
width: 10px;
height: 10px;
border: 20px solid red;
position: absolute;
left: 0;
top: 25px;
border-radius: 50px;
background: #fff;
}

#circle::before {
content: '';
width: 10px;
height: 10px;
border: 20px solid #FFF;
position: absolute;
right: 0;
top: 25px;
border-radius: 50px;
background: red;
}
</style>
</head>

<body>
<div id="circle"></div>
</body>

</html>

举报

相关推荐

0 条评论