CSS 3.0实现八卦图

利用CSS实现一个八卦图，效果如下：

实现代码如下：

<!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>

CSS 3.0实现八卦图相关推荐

用CSS伪类制作一个不断旋转的八卦图？
前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head>& ...
用CSS实现阴阳八卦图等图形
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
使用CSS达到阴阳八卦图等图形
CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle {width: 200px;height: 100px;backgrount-colo ...
CSS制作太极八卦图及衍生物
CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...
css实例——太极八卦图
css实例--太极八卦图分析: 可以看成是三个类型的圆组成,分别是大的圆,中等大小的圆,小的圆.这是一个整体的思路,具体的话就是去调整各个圆的位置 HTML代码部分 <!DOCTYPE htm ...
前端CSS实现八卦图，三角形
浅谈前端CSS中的一个硬核属性-border 前言了解过前端的都知道,html 所有的标签都离不开border属性,Border,顾名思义,边框,给标签加个边框,就像我们生活中的窗户框子,Borde ...
动态八卦图html,用CSS实现阴阳八卦图等图形_html/css_WEB-ITnose
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
HTML+CSS静态网页练习案例（转动的八卦图）
HTML+CSS静态网页练习案例(转动的八卦图) 需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特 ...
css：只用一个div实现八卦图
只用一个div实现一个八卦图效果图: html: <div></div> css: 方法一 :(利用边框) <style>div{width: 100px;hei ...
html简单网页代码案例_HTML+CSS静态网页练习案例（转动的八卦图）
需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特点静态的完成效果动态效果(点击链接观看) 太极 ...

CSS 3.0实现八卦图

CSS 3.0实现八卦图相关推荐

最新文章

热门文章