CSS3:绘制图形
CSS画图形,基本上所有的实现都是对边框的角度的调整及组合。
以下不包含兼容浏览器的前缀,请使用时在border-radius前加-moz-、-webkit- ....
1、正常得不得了的矩形
.square{
width:200px;
height:100px;
background: red;
}
2、圆形,边宽为圆半径,4个扇形为一个圆,调整border-radius:50px 0 0 0;可得出不同方向的扇形
/*圆形*/
.circle{
width:100px;
height:100px;
background: red;
border:1px solid red;
border-radius:50px;
}
/*半圆*/
.semicircle{
width:100px;
height:50px;
background: red;
border-radius: 100px 100px 0 0;
}
/*扇形*/
.fan{
width:50px;
height:50px;
background: red;
border-radius: 100px 0 0 0;
}
/*吃豆豆*/
.eatman{
width:;
height:;
border:50px solid red;
border-radius: 50px;
border-color:red transparent red red ;
}
3、椭圆形,水平半径100/垂直半径50
.oval{
width:200px;
height:100px;
background: red;
border:1px solid red;
border-radius: 100px/50px;
}
4、三角形,设置了内容区高宽为0,就可以看到三角形,不同角度的三角形原理都是一样的,border-color顺序是:上右下左
.triangle{
width:;
height:;
border:50px solid red;
border-color: transparent transparent red transparent;
}
5、平行四边形,利用的是transform的变形效果
.parallelogram{
width: 150px;
height: 100px;
transform: skew(20deg);
background: red;
}
其他图形都是根据以上图形展开思维的...
CSS3:绘制图形的更多相关文章
- 用CSS3绘制图形
参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...
- css3 绘制图形
星形: .star-six { width:; height:; border-left: 50px solid transparent; border-right: 50px solid trans ...
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- CSS3绘制旋转的太极图案(一)
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- WPF2D绘制图形方法
我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...
随机推荐
- hive的体系架构及安装
1,什么是Hive? Hive是能够用类SQL的方式操作HDFS里面数据一个数据仓库的框架,这个类SQL我们称之为HQL(Hive Query Language) 2,什么是数据仓库? 存放数据的地方 ...
- JVM内存模型 三
本文章节: 1.JMM简介 2.堆和栈 3.本机内存 4.防止内存泄漏 1.JMM简介 i.内存模型概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉 ...
- codeforce C. Okabe and Boxes
题目传送门 这道题 每次删除一个点 那么这个点必然在栈里面 那么如果堆顶不是他 我们就需要一次操作使得堆合理 这时我们可以把他删除然后把他下面的点打个标记表示这下面的点以后想怎么排就怎么排以后都不需要 ...
- bzoj 1001 平面图转对偶图 最短路求图最小割
原题传送门http://www.lydsy.com/JudgeOnline/problem.php?id=1001 整理了下之前A的题 平面图可以转化成对偶图,然后(NlogN)的可以求出图的最小割( ...
- bootstrap-table不分页时对数值类型数据的排序
html中的代码 <table id="table"></table> sortData.json的数据如下 [ {"name":&qu ...
- 用python写爬虫笔记(一)
https://bitbucket.org/wswp/code http://example.webscraping.com http://www.w3schools.com selenium.g ...
- adt 运行时,显示no target selected.
检查adt\adt-bundle-windows-x86-20131030\sdk\system-images下面是否有相关image文件.
- java 聊天程序
package cn.apr.chart; import java.net.*; import java.io.*; import java.util.*; public class ChatServ ...
- kvm的vmcall
这几个接口的区别在于参数个数的不用,本质是一样的.挑个参数最多的看下: static inline long kvm_hypercall4(unsigned int nr, unsigned long ...
- 6.memcached缓存系统
1.memcached的安装和参数 memcached缓存系统一般还是部署在linux服务器上,所以这里只介绍linux上memcache的安装 首先切换到root用户,然后apt-get insta ...