只用一个div画一个太极图

如题，最近学习css3的时候，比着葫芦画瓢，画了个太极图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style type="text/css">body {background-color: #abcdef;}#taiji {width: 0px;height: 600px;border-left: 300px solid black;border-right: 300px solid white;border-radius: 100%;}#taiji::before {content: '';display: block;width: 100px;height: 100px;border: 100px solid black;border-radius: 100%;background-color: white;margin-left: -150px;}#taiji::after {content: '';display: block;width: 100px;height: 100px;border: 100px solid white;border-radius: 100%;background-color: black;margin-left: -150px;}</style>
<body><div id="taiji"></div>
</body>
</html>

只用一个div画一个太极图相关推荐

只用一个div画一个小米logo
小米发布了新logo 前段时间小米宣布了他们的新logo,但是细心的网友发现.小米的官网logo是这样实现的: 挺有趣的,我自己也实现一个试试外边框使用border-box实现圆角(真logo是R角 ...
【css太极图】html+css用一个div画出太极图
html和css都很简单,这里也就不多说了,直接看效果: html代码,复制到html文件直接打开即可. <!DOCTYPE html> <html lang="en&qu ...
html中怎么让一个div显示或隐藏,怎么让一个div显示一个div隐藏?
让一个div显示一个div隐藏的方法如下(代码的规格写法只能这样): 1.HTML代码如下: menu0 menu1 menu2 menu3 menu4 menu5 menu6 menu7 d0 d1 ...
html动态显示隐藏div,div隐藏与显示属性怎么让一个div显示一个div隐藏
怎么让一个div显示一个div隐藏总是显示 js控制div显示与隐藏,js利用"hover"属性 1.首先样式要设定好,在每个li区域只能显示a或者b. 2.引入js库代码(jq ...
退出图标html css 实现,用一个div画出关闭图标
今天实现一个用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布 ...
python同切圆_画一组同切圆画一组同心圆画一个五角星画一个黄色实心五角星 turtle.up() turtle.goto(0,-100) turtle.down() ...
1.画一组同切圆 >>> import turtle >>> turtle.circle(10) >>> turtle.circle(15) &g ...
使用html div 画一个简易的房子
直接上源码: <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
css：只用一个div实现八卦图
只用一个div实现一个八卦图效果图: html: <div></div> css: 方法一 :(利用边框) <style>div{width: 100px;hei ...
CSS3_边框 border 详解_一个 div 的阴阳图
(面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框足够大 3. 需要的三角形的部分, border-top-color 设置为 ...

只用一个div画一个太极图

只用一个div画一个太极图相关推荐

最新文章

热门文章