最近在学习CSS，先从CSS画点平面图形入手，发现除了正方形、长方形此类比较简单，只要有长宽设置恰当即可，画圆要涉及radius，然后恢复到做界面的最讨厌的状态了，不断的修改设值，调整数据，所幸并不多。下面就进入正文介绍吧，先将图形以及代码摆放出来，然后讲解下如何画，以及一些小细节。

1、正方形

 <!DOCTYPE html>

 <html>

 <head>

     <title>triangle</title>

     <style type="text/css">

         div

         {

             width:110px;

             height:110px;

             border-right: 1px solid yellow;

             /*transparent 变透明*/

             border-left:1px solid yellow;

             border-bottom: 1px solid pink;

             border-top: 1px solid pink;

         }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

正方形就比较简单，只要设置长宽，长宽一样则为正方形，不一样则为长方形。

2、三角形

                

 <!DOCTYPE html>

 <html>

 <head>

     <title>triangle</title>

     <style type="text/css">

     div

         {

             width:0px;

             height:0px;

             border-right: 50px solid transparent;

             /*transparent 变透明*/

             border-left:50px solid transparent;

             border-bottom: 100px solid transparent;

             border-top: 100px solid pink;

         }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

从长方形向三角形转化，首先去除宽高的像素，这样子看上去便有了四个三角形，如何去除多余三角形，这里可以利用transparent，来将他们隐藏起来，想要三角形的位置不一样，隐藏的边界也不是一样。例如只要向下的三角形，就把左右下的三条边变透明（一般左右border一样画出来的三角形是等腰三角形，上下左右border一样画出来为等边三角形，直角三角形看你要的直角转向而定，直角三角形只要有留两个边即可，示例border-left:100px solid transparent;       border-top: 100px solid pink;）

3、梯形

 div

         {

             width:30px;

             height:0px;

             border-right: 50px solid transparent;

             /*transparent 变透明*/

             border-left:50px solid transparent;

             border-bottom: 100px solid transparent;

             border-top: 100px solid pink;

         }

梯形是在三角形的基础上，将width不设为0，便有梯形。

4、平行四边形

 div

     {

         width:100px;

         height:100px;

         border:1px solid pink;

         transform: skew(20deg,0deg);

         -ms-transform: skew(20deg,0deg); /* IE 9 */

         -webkit-transform: skew(20deg,0deg); /* Safari and Chrome */

     }

平行四边形主要是在正方形或者长方形的基础上，利用css的transfrom:skew来拉伸扭曲，其 x 轴动，y轴不变。

5、圆形

 div

 {

     width:100px;

     height:100px;

     border:1px solid pink;

     border-radius: %;

     -ms-border-radius: %; /* IE 9 */

     -webkit-border-radius: %; /* Safari and Chrome */

 }

radius来设置其弯曲程度（用来画圆角），border-radius:50%是指其水平弯曲程度，等价于

border-top-left-radius: 50% ;border-top-right-radius: 50% ; border-bottom-right-radius: 50% ;border-bottom-left-radius: 50% ;从左上角，右上角，左下角，右下角，四个地方分别入手。

6、蛋

 <!DOCTYPE html>

 <html>

 <head>

     <title>triangle</title>

     <style type="text/css">

         body

         {

             margin:  100px;

             text-align: center;

         }

         div{

             width: 100px;

             height: 140px;

               /*等价式border-radius: 50% 50% 50% 50% / 65% 65% 40% 40%;;*/

             border-top-left-radius: % %;

             border-top-right-radius: % %;

             border-bottom-right-radius: % %;

             border-bottom-left-radius: % %;

             /*    水平半径，垂直半径*/

             border: 1px solid pink;

         }

     </style>

 </head>

 <body>

 <div>I just an egg!</div>

 </body>

 </html>

radius在 / 前面设置的值也不一样，前面为水平弯曲，后面为垂直弯曲，根据设置的值不同能画出不一样的图形，比如想画个椭圆，就修改下里面的值便可。

7、五角星

 <!DOCTYPE html>

 <html>

 <head>

     <title>triangle</title>

     <style type="text/css">

         body

         {

             margin:  100px;

         }

         div{

             width: 0;

             height: 0;

             color: red;

             margin: 50px 0;

             position: relative;

             display: block;

             border-bottom:100px solid pink;

             border-left: 35px solid transparent;

             border-right:35px solid transparent;

         }

         div:before{

             width: 0;

             height: 0;

             position: absolute;

             top: -40px;

             left: -98px;

             color: white;

             display: block;

             content: "";

             border-right: 60px solid pink;

             /*transparent 变透明*/

             border-left:90px solid  transparent;

             border-top: 90px solid  transparent;

             border-bottom: 90px solid  transparent;

             transform: rotate(56deg);

             -moz-transform:rotate(56deg);

             -webkit-transform:rotate(56deg);

             -ms-transform:rotate(56deg);

         }

         div:after{

             width: 0;

             height: 0;

             position: absolute;

             top: -40px;

             left: -49px;

             color: white;

             display: block;

             content: "";

             border-right: 60px solid pink;

             /*transparent 变透明*/

             border-left:90px solid  transparent;

             border-top: 90px solid  transparent;

             border-bottom: 90px solid  transparent;

             transform: rotate(125deg);

             -moz-transform:rotate(125deg);

             -webkit-transform:rotate(125deg);

             -ms-transform:rotate(125deg);

 }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

画五角星用到了伪类器，这里就不详细介绍，想了解伪类器就去百度下。这里运用伪类器，三层叠加，第一层是个三角形，第二层是一个钝角三角形，第三层也是个钝角三角形，第一层的三角形由前面的三角形构造而来，前面也讲过如何去画出不同方向的三角形以及设置。这里的角度利用rotate去旋转角度，然后通过top，left，以及position等来让他们位置重合，displace:block，来让他们叠合覆盖。

8、心形

 <!DOCTYPE html>

 <html>

 <head>

     <title>triangle</title>

     <style type="text/css">

         body

         {

             margin:  100px;

         }

         div{

         }

         div:before{

             position: relative;

             top: 61px;

             left:43px;

             display: block;

             content: "";

             position: relative;

             display: block;

             border-radius: 100px 100px 0px 0px;

             background: #8AC007;

             padding: 20px;

             width: 40px;

             height: 100px;

             transform: rotate(45deg);

         }

         div:after{

             position: absolute;

             top: -80px;

             left:0px;

             display: block;

             content: "";

             position: relative;

             display: block;

             border-radius: 100px 100px 0px 0px;

             background: #8AC007;

             padding: 20px;

             width: 40px;

             height: 100px;

             transform: rotate(-45deg);

 }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

画心形，我曾用来两种方法，最后采用第二种，第一种是用两个圆和正方形叠加来做，但是做出来的效果不好，不够圆滑，所以后来用第二种方法，用两个长方形来画，同时将长方形的左上角，右上角圆化，然后两者叠加，做出的效果也好看。（不要问我为什么这颗心时绿色我，青青草原也挺好的）

9、对话框

 <!DOCTYPE html>

 <html>

 <head>

     <title>triangle</title>

     <style type="text/css">

         body

         {

             margin:  100px;

         }

         div{

         }

         div:before{

             position: relative;

             top: 55px;

             left:15px;

             display: block;

             content: "";

             position: relative;

             display: block;

             width:0px;

             height:0px;

             border-right: 70px solid  #8AC007;

             /*transparent 变透明*/

             border-left:100px solid transparent;

             border-bottom: 10px solid transparent;

             border-top: 10px solid transparent;

             transform: rotate(-10deg);   

         }

         div:after{

             position: absolute;

             top: 0px;

             left:150px;

             display: block;

             content: "";

             position: relative;

             display: block;

             background: #8AC007;

             border-radius: 10px 10px 10px 10px;

             padding: 20px;

             width: 100px;

             height: 20px;

             box-shadow: 2px 2px #aaaaaa;

 }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

对话框是由长方形和三角形叠加而来的，同时将长方形做了四个圆角，看上去比较上眼，为了让对话框由立体感，增加了阴影效果box-shadow: 2px 2px #aaaaaa;

10、波浪框

 <!DOCTYPE html>

 <html>

 <head>

     <title>triangle</title>

     <style type="text/css">

         body

         {

             margin:  100px;

             text-align: center;

         }

         div{

             width: 100px;

               height: 50px;

               border-radius: 2em 1em 4em / 0.5em 3em;

               border: 3px solid pink;

         }

     </style>

 </head>

 <body>

 <div>Skylar!</div>

 </body>

 </html>

波浪框是个随机产物，但是个人觉得挺好看的保留下来。

对于CSS，个人觉得其设值是很有意思，因为你在大多数情况下，你不知道你设的值回带来什么的效果。所以，尝试深入体会其趣味。

CSS学习笔记一：css 画平面图形的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  3. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  4. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  5. DIV+CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  6. Head First Html and CSS学习笔记之CSS

    第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...

  7. HTML+CSS学习笔记 (13) - CSS代码缩写，占用更少的带宽

    标签:HTML+CSS 盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在m ...

  8. HTML+CSS学习笔记 (15) - css样式设置小技巧

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  9. HTML+CSS学习笔记 (11) - CSS盒模型

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  10. HTML+CSS学习笔记 (10) - CSS格式化排版

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

随机推荐

  1. Java经典编程题50道之二十六

    请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. public class Example26 {    public static void main(Stri ...

  2. 基于NIO的Netty网络框架

    Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用户可以方便的主动获取或者 ...

  3. java(3) if结构

    一.基本if结构 1.流程图 1)输入输出 2)判断和分支 3) 流程线 1.1  简单的if条件判断 if(表达式){             //表达式为true,执行{}中的代码 } 示例1:如 ...

  4. python通过excel对数据库插入数据

    1.需要有两个包文件xlrd及MySQLdb(其他数据库可以另外找) 2.读取excel文件信息 book = xlrd.open_workbook(文件地址) 3.建立MySQL链接 databas ...

  5. python爬虫之re正则表达式库

    python爬虫之re正则表达式库 正则表达式是用来简洁表达一组字符串的表达式. 编译:将符合正则表达式语法的字符串转换成正则表达式特征 操作符 说明 实例 . 表示任何单个字符 [ ] 字符集,对单 ...

  6. Behavior的使用（一）：页面跳转NavigateToPageAction

    Behavior的使用,让UI设计师能够更加方便的进行UI设计,更高效地和开发进行合作.Behavior有三种触发方式:EventTriggerBehavior事件触发,DataTriggerBeha ...

  7. module.exports与exports,export和export default

    还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...

  8. 原生js在绑定事件时不用获取id名可直接用id名绑定？？？

    <div id="btn"> 点击 </div> <script> btn.onclick=function(){ console.log(bt ...

  9. Matlab: 作图

    控制图的大小 figure('position',[x0,y0,dx,dy]); figure(fig number); 显示图例 legend('leg1','leg2') depend on ho ...

  10. 获取Java VM中当前运行的所有线程

    /** * 获取Java VM中当前运行的所有线程 * @return */ public static Thread[] findAllThreads() { ThreadGroup group = ...