使用CSS达到阴阳八卦图等图形
CSS还是比較强大的，能够实现中国古典的“阴阳八卦图”等形状。
正方形
#rectangle {
width: 200px;
height: 100px;
backgrount-color: red;
}#circle {
width: 100px;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
background-color: red;
}
椭圆
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}直角三角形
直角边left-top
#triangle-leftbottom {
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 100px solid transparent;
}
直角边right-top
#triangle-righttop {
width: 0;
height: 0;
border-right: 100px solid red;
border-top: 100px solid transparent;
}梯形
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
transform: skew(20deg);
background: red;
}
鸡蛋
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 55px 2px;
border-radius: 100%;
position: relative;
} #yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
} #yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
八卦图展示不出来，蛋疼，请下载HTML文件 http://download.csdn.net/detail/huoyingfans/7455161或者 去 http://blog.fansunion.cn/articles/3736 查看
很多其它文章请參考：http://www.itfriend.cn/user/FansUnion
版权声明：本文博主原创文章，博客，未经同意不得转载。
使用CSS达到阴阳八卦图等图形的更多相关文章
- 用CSS实现阴阳八卦图等图形
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- css 实现旋转八卦图
虽然这不算什么亮点,不过也可以供路上的小伙伴学习下 直接上干货: <!doctype html> <html lang="en"> <head> ...
- css基本图形绘制（基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等）
正方形: 代码: <style> .square { width: 100px; height: 100px; background-color: cornflowerblue; } &l ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- 用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- css实例——“旋转”太极八卦图
话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- jqPlot图表插件学习之阴阳烛图
一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...
- CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
- CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...
随机推荐
- LintCode 77: 最长公共子序列
public class Solution { /** * @param A, B: Two string. * @return: the length of the longest common s ...
- 【译】ASP.NET应用程序和页面生命周期
为何翻译此文 一.此文是Code Project社区2010年4月ASP.NET板块的最佳文章,说明了此文的份量: 二.锻炼自己的英文技术文章翻译能力,提高英文技术文档阅读能力: 三.了解掌握ASP. ...
- 封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- (转)从Membership 到 .NET4.5 之 ASP.NET Identity
引入 - 用户信息是如何存在数据库中的 我们前两篇都只讲到了怎么用Membership注册,登录等,但是我们漏掉了一个很重要并且是基本上每个用Membership的人都想问的,我的用户信息怎么保存?我 ...
- 李洪强漫谈iOS开发[C语言-039]-剪刀石头布
李洪强漫谈iOS开发[C语言-039]-剪刀石头布
- kernel 校验和实现
kernel 校验和实现 Kernel checksum implementation ) TCP包的错误检测使用16位累加和校验. 除了TCP包本身, TCP校验数据块还包括源IP地址,目的IP地址 ...
- VS插件集
Unit Test Generator 很好用的测试插件 注:在VS2015中,改名为Test generator Nunit extension了. ReSharperPlatformVs11 ...
- 暂时和永久改动oracle sysdate的默认输出格式
1.当前会话有效 alter session set NLS_DATE_FORMAT='YYYY-MM-DD:HH24:MI:SS'; 2.永久生效 sys用户登入后运行例如以下命令 然后重新启动数据 ...
- 需要接入的SDK包，一定要用最新版，否则后果很严重
ios8更新后,原来的静态库不支持.导致一个bug连续测试好多天都没结果.
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...