CSS 3.0实现八卦图-CFANZ编程社区

利用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>