博客列表 >太极图案例

太极图案例

世界上最好的语言是PHP
世界上最好的语言是PHP原创
2022年05月16日 05:27:25809浏览

一、效果图

二、思路

  1. 通过border-radius: 50%来实现container画圆

  2. 通过伪代码before中以left和top、after中以right和top定位到对应圆心进行二次画圆及涂色即可实现

三、源代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>太极图</title>    <style>        .container{            width: 96px;            height: 48px;            border-radius: 50%;            border: 2px solid #000;            margin: 0 auto;            position: absolute;            border-bottom: 50px solid #000;        }        div:before{            content: "";            position: absolute;            left: 0;top: 50%;            width: 8px;            height: 8px;            background: #000;            border: 20px solid #fff;            border-radius: 50%;        }        div:after{            content: "";            position: absolute;            right: 0;            top: 50%;            width: 8px;            height: 8px;            background: #fff;            border: 20px solid #000;            border-radius: 50%;        }    </style></head><body>    <div class="container"></div></body></html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议