利用CSS可以画出各种需要的图形
目录
[1]矩形
[2]圆形
[3]椭圆
[4]直角三角形
[5]正三角形
[6]平行四边形
[7]梯形
[8]六角星
[9]六边形
[10]五角星
简单图形

矩形
div{
width: 100px;
height: 100px;
background-color: red;
}

圆形

div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}

椭圆

div{
width: 100px;
height: 50px;
background-color: red;
border-radius: 50%;
}

直角三角形

div{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
}

正三角形

div{
width: 0;
height: 0;
border: 50px solid transparent;
border-width: 50px 43.3px;
border-bottom-color: red;
}

平行四边形

div{
margin-left: 50px;
width: 100px;
height: 100px;
background-color: red;
transform: skew(30deg);
}

梯形

div{
width: 50px;
border: 50px solid transparent;
border-bottom-color: red;
}

复杂图形

六角星
　　两个三角形叠压

div{
position: relative;
width: 0;
border: 50px solid transparent;
border-width: 50px 43.4px;
border-bottom-color: red;
}
div:after{
position: absolute;
content:"";
width: 0;
border: 50px solid transparent;
border-width: 50px 43.4px;
border-top-color: red;
top: 16px;
left: -42px;
}

六边形
　　两个梯形拼接

div{
position: relative;
width: 50px;
border: 50px solid transparent;
border-bottom-color: red;
}
div:after{
position: absolute;
content:"";
width: 50px;
border: 50px solid transparent;
border-top-color: red;
top:50px;
left: -50px;
}

五角星
　　一个大三角形底部掏掉一个小三角形；两个前面的相同图形叠压

<body>
　　<div></div>
　　<div></div>
</body>

div {
margin-left: 100px;
position: relative;
width: 0px;
border: 50px solid transparent;
border-width: 100px 35px;
border-bottom-color: red;
}
div:after{
content: "";
position:absolute;
width: 0;
border: 100px solid transparent;
border-width: 25px 50px;
border-bottom-color: white;
top: 51px;
left: -50px;
}
div:last-child{
top: -164px;
left: 52px;
transform: rotate(72deg);
}

原文地址：http://www.cnblogs.com/xiaohuochai/p/5028101.html

CSS画出的各种形状图的更多相关文章

  1. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  2. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  5. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  6. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  7. 用Maxima画出一些有趣的图

    Maxima可以画出Chaos.Duffing .Fern.Lorenz.Rossler .Portraits .Mandelbrot.Staircase.Triangles等有趣的图... Chao ...

  8. 用css画出对话框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi

  9. CSS画出三角形（利用Border）

    画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...

随机推荐

  1. UVa 11624 (BFS) Fire!

    也是一个走迷宫的问题,不过又有了点变化. 这里迷宫里有若干把火,而且火每秒也是向四个方向蔓延的.问人是否能走出迷宫. 我用了两遍BFS,第一遍把所有着火的格子加入队列,然后计算每个格子着火的时间. 第 ...

  2. fmri分析工具：spm里的统计学 Introduction to SPM statistics

     引言 Introduction 需要特别说明,spm是每一个体素为单位,计算统计量,进行t检验. 1.分别在每个体素上做方差分析; 2.对每个体素的方差分析结果,计算t检验统计量; 3.计算等同于t ...

  3. MAC自动备份数据到服务器

    需求:公司内部使用自己电脑,回家需要使用另一台电脑,所以想时时备份公司用的电脑中文件.代码到服务器上,回家就可以用啦 1 无密码使用scp (1)第一步:生成密匙对,我用的是rsa的密钥.使用命令 & ...

  4. 【英语】Bingo口语笔记(29) - Run系列

  5. zoj 2105 Lifting the Stone

    题意   裸的计算几何  求多边形重心: #include<iostream> #include<stdio.h> #include<cstring> #inclu ...

  6. OpenGL学习之路（四）

    1 引子 上次读书笔记主要是学习了应用三维坐标变换矩阵对二维的图形进行变换,并附带介绍了GLSL语言的编译.链接相关的知识,之后介绍了GLSL中变量的修饰符,着重介绍了uniform修饰符,来向着色器 ...

  7. hdu 5444 Elven Postman（根据先序遍历和中序遍历求后序遍历）2015 ACM/ICPC Asia Regional Changchun Online

    很坑的一道题,读了半天才读懂题,手忙脚乱的写完(套上模板+修改模板),然后RE到死…… 题意: 题面上告诉了我们这是一棵二叉树,然后告诉了我们它的先序遍历,然后,没了……没了! 反复读题,终于在偶然间 ...

  8. Selenium启动本地firefox的profile

    ProfilesIni pi = new ProfilesIni();FirefoxProfile profile = pi.getProfile("default");WebDr ...

  9. .NET下用C#实现邮箱激活功能

    最近要用到安全邮箱激活的功能,故写篇博客记录下. 思路:在表中增加一个字段State来记录邮箱是否激活(0激活,1未激活.) 1.发送邮件.     1-1,给邮箱发送邮件.内容:激活地址+GUID. ...

  10. js保留小数点后N位的方法介绍

    js保留小数点后N位的方法介绍 利用toFixed函数 代码如下 复制代码 <script language="javascript"> document.write( ...