【CSS】用CSS画太极图

效果预览： https://sevlt.github.io/tai-chi/index.html

HTML：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Tai-chi</title><link rel="stylesheet" href="style.css"></head><body><div id="yinyang"></div>
</html>

CSS：

body {background-color: #adadad;/*设置背景色*/
}#yinyang {width: 200px;height: 200px;border-radius: 50%;background: linear-gradient(/*圆球上半部分为白色，下半部分为黑色*/to bottom,#ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);position: relative;margin: 100px auto;
}#yinyang::before {position: absolute;content: "";width: 20px;height: 20px;border-radius: 50%;border: 40px solid black;/*左侧黑球套白点*/background-color: white;left: 0;top: 50px;
}#yinyang::after {position: absolute;content: "";width: 20px;height: 20px;border-radius: 50%;border: 40px solid white;/*右侧白球套黑点*/background-color: black;right: 0;top: 50px;
}

效果图：

【CSS】用CSS画太极图相关推荐

php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
[css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
[css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用css画一个五边形和一个六边形
[css] 用css画一个五边形和一个六边形五边形:clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 六边形:cli ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
[css] 用css画出一个圆圈，里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
[css] 用css画出一把刻度尺
[css] 用css画出一把刻度尺 <div class='ruler'><div class='cm'><div class='mm'></div>& ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

【CSS】用CSS画太极图

【CSS】用CSS画太极图相关推荐

最新文章

热门文章