Div+Css画太极图源代码

最新推荐文章于 2023-10-11 17:34:50 发布

weixin_30951743

最新推荐文章于 2023-10-11 17:34:50 发布

阅读量312

点赞数

原文链接：http://www.cnblogs.com/tl2f/p/4681812.html

版权

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title>Div+Css太极图</title>
　　　　<style type="text/css">
　　　　.circle{
　　　　　　　　width: 100px;
　　　　　　　　height: 50px;
　　　　　　　　border:1px solid black;
　　　　　　　　border-radius: 100px;
　　　　　　　　position:relative;
　　　　　　　　border-bottom:50px solid black;
　　　　　　}
　　　　.circle::before{
　　　　　　　　float:left;
　　　　　　　　content: '';
　　　　　　　　width: 10px;
　　　　　　　　height: 10px;
　　　　　　　　border: 20px solid black;
　　　　　　　　border-radius: 50px;
　　　　　　　　position: relative;
　　　　　　　　top:50%;
　　　　　　　　left:0;
　　　　　　　　background-color:#fff;

　　　　　}
　　　　.circle::after{
　　　　　　　　float:right;
　　　　　　　　content: '';
　　　　　　　　width: 10px;
　　　　　　　　height: 10px;
　　　　　　　　border: 20px solid #fff;
　　　　　　　　border-radius:50px;
　　　　　　　　position: relative;
　　　　　　　　top:50%;
　　　　　　　　left:0;
　　　　　　　　background-color:#000;
　　　　　　}

　　　　</style>
　　</head>
　　<body>
　　　　<div class="circle">

　　　　</div>
　　</body>
</html>

转载于:https://www.cnblogs.com/tl2f/p/4681812.html

weixin_30951743

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Div+Css画太极图源代码

<!DOCTYPE html><html> 　　<head> 　　　　<meta charset="utf-8"> 　　　　<title>Div+Css太极图</title> 　　　　<style type="text/css"> 　　　　.circle{ 　　　　　　　　width: 100px;...
复制链接

扫一扫