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. CentOS学习笔记--账号管理与权限配置

    Linux 的账号管理与权限配置 管理员的工作中,相当重要的一环就是『管理账号』啦! 使用者标识符: UID 与 GID 虽然我们登陆 Linux 主机的时候,输入的是我们的账号,但是其实 Linux ...

  2. The given path's format is not supported.

    问题 编程以来今本没有使用input[type=file]这个控件过,今天突然使用尽然报错了,在本地chrome,firefox等其他的浏览器都是好的,唯独ie报错了.在服务器的时候,尽然chrome ...

  3. （一）、NodeJS （转载）

    NodeJS基础                                                 ------ 转载自阿里巴巴 什么是NodeJS JS是脚本语言,脚本语言都需要一个解 ...

  4. 如何：通过对字符串应用 HTML 编码在 Web 应用程序中防止脚本侵入

    大多数脚本利用发生在用户可以将可执行代码(或脚本)插入您的应用程序时. 默认情况下,ASP.NET 提供请求验证.只要窗体发送包含任何 HTML,该验证都会引发错误. 您可以使用下列方法防止脚本利用: ...

  5. CSS文件中第一行@charset "utf-8";的作用

    使用UTF-8编码唯一的好处是,国外的用户如果使用Windows XP英文版,浏览UTF-8编码的任何网页,无论是中文.还是日文.韩文.阿拉伯文,都可以正常显示,UTF-8是世界通用的语言编码,而如果 ...

  6. 64位操作系统弹出"Failed to load the JNI shared library “E:/2000/Java/JDK6/bin/..jre/bin/client/jvm.dll”

    64位操作系统弹出"Failed to load the JNI shared library /..jre/bin/client/jvm.dll”,最大的可能就是jdk的版本问题.去你的C ...

  7. 使用memcached实现tomcat集群session共享

    环境centos6.7,下载安装必要的软件:yum -y install epel-release(tomcat7在此源上,tomcat7是现在主流版本) yum -y install tomcat ...

  8. unison+inotify实现文件双向自动同步

    nfs适合存小图片和小文件,有一个致命的缺点,就是其中一台web服务挂掉之后,会直接导致web页面无法访问,动态的那种数据, 而且数据量很大的数据不适合nfs Unison是一款跨平台(window, ...

  9. ngx_http_upstream_module模块学习笔记

    ngx_http_upstream_module用于将多个服务器定义成服务器组,而由proxy_pass,fastcgi_pass等指令引用 (1)upstream name  {...} 定义一个后 ...

  10. vc++ 内存连续读写操作

    //初始化内存 int *data=(int*)malloc(sizeof(int)*4); ZeroMemory(data, sizeof(int)*4); int *m=(int*)malloc( ...