1.矩形
绘制矩形应该是最简单的了，直接设置div的宽和高，填充颜色，效果就出来了。

2.圆角矩形
绘制圆角矩形也很简单，在1的基础上，在使用css3的border-radius，即可。

3.圆
根据圆的特性，在2的基础上，设置div的宽和高一直，为正方形，然后设置border-radius为50%即可。

4.椭圆
椭圆也很简单了，只需要在3的基础上，让div的宽和高不一致即可。为了更好看，建议宽设置为高的1.5倍。

5.三角形
三角形相对其他来说，就有点难了。这里我们要用到border-style属性在配合分别设置四个边的border的宽度来实现。最终效果见下面的代码。

6.弧
本质上是利用圆角来实现，现在需要把矩形的左上角的圆角绘制成弧形，那么把右边和底边border的宽度设成0px，让他们不可见，设置左上角圆角的半径，让其变大，看得明显些，其余的圆角半径全都设成0px，这样一个弧形就完成了。

7.平行四边形

平行四边形是在矩形的基础上运用了一个CSS3的transform属性。使用了变形效果。

8.六角星
六角星是使用了一个“:after”制作了另一个反方向的三角形，在定位层叠到一起，从而形成六角星，说白一点就是两个三角拼在一起变成了六角星。

9.五角星
五角星主要也是使用了CSS3的transform属性，并配合“:after”来使用。

10.心形、阴阳图、Point Burst、仿微信消息框、Pac-Man等就不一一举例了，大家直接看代码。

DEMO地址：http://codepen.io/jonechen/pen/mPgYYQ

详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧的更多相关文章

  1. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  2. [javascript svg fill stroke stroke-width x y rect rx ry 属性讲解] svg fill stroke stroke-width rect 绘制具有圆角矩形属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. 聊天气泡的绘制（圆角矩形+三角形+黑色边框，关键学会QPainter的draw函数就行了），注意每个QLabel都有自己的独立坐标

    头文件: #ifndef GLABEL_H #define GLABEL_H #include <QLabel> #include <QPainter> #include &l ...

  4. 详解用OpenCV绘制各类几何图形

    摘要:本文详细介绍了OpenCV绘制几何图形的方法,利用cv2.line().v2.circle().cv2.rectangle().cv2.ellipse().cv2.polylines().cv2 ...

  5. Android中绘制圆角矩形图片及任意形状图片

    圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为它避开了直角的生硬,带来更好的用户体验,下面是几个设计的例子: 下面在Android中实现将普通的矩形图片绘制成圆角 ...

  6. canva绘制圆角矩形

    在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...

  7. 圆角矩形shader

    在游戏中,有时需要对一张矩形图片进行切割,绘制成圆角矩形. circelrect.vert attribute vec4 a_position; attribute vec4 a_normal; at ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

随机推荐

  1. Oracle小数点格式化

    1. select to_char(123456789.12345,'fm999999990.99') from dual; 如果fm后位数不足则会显示 ## select to_char(12345 ...

  2. SubsetsTotal Accepted:49746Total Submissions:176257My Submissions

    Subsets Total Accepted: 49746 Total Submissions: 176257My Submissions Given a set of distinct intege ...

  3. Linux命令行选项及参数

    1.main函数参数形式 int main(int argc , char *argv[] , char *env[]); //第一个参数argc代表命令行的参数个数 //第二个参数依次指向各个参数, ...

  4. PF_RING安装

    1.安装Build-essential.SVN.Flex.Libnuma-dev.bison ubuntu中:sudo apt-get install build-essential subversi ...

  5. LoadCursor 函数

    从可执行文件中载入指定的光标资源,加载到指定的应用实例中 ? 1 2 3 4 5 HCURSOR WINAPI LoadCursor(    _In_opt_ HINSTANCE hInstance, ...

  6. JS中的控制函数调用：call(),apply()和bind()

    所有的函数都具有call(),apply()和bind()方法.它们可以在执行方法的时候用一个值指向this,并改变面向对象的作用域. apply方法: 以下的两种表达式是等价的: func(arg1 ...

  7. 如何验证 jemalloc 优化 Nginx 是否生效

    Jemalloc 源于 Jason Evans 2006年在 BSDcan conference 发表的论文:<A Scalable Concurrent malloc Implementati ...

  8. 在PyQt中直接使用ui文件并加载qrc资源文件

    1. 用Qt设计师创建一个包含qrc资源文件的ui文件 2.打开cmd使用以下命令把qrc资源文件转换成十六进制的py文件 pyrcc4 -o C:\res.py C:\res.qrc pyrcc4 ...

  9. jQuery ajax Load关闭缓存的方法

    [导读] 在jQuery ajax Load关闭缓存的方法很简单,我们只要在$ ajaxSetup中把cache: false就楞以了,当然我们还可以使用一个随机参数来实例了.简单介绍load(url ...

  10. desin pattern

    uml tool http://cruise.site.uottawa.ca/umple/ http://www.umldesigner.org/download/ http://www.eclips ...