CSS 实现八卦图
利用CSS实现一个八卦图，效果如下：
实现代码如下：
<!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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/06/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
