利用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. Codeforces 447 C DZY Loves Sequences【DP】

    题意:给出一列数,在这个序列里面找到一个连续的严格上升的子串,现在可以任意修改序列里面的一个数,问得到的子串最长是多少 看的题解,自己没有想出来 假设修改的是a[i],那么有三种情况, 1.a[i]& ...

  2. 【转】很有用但鲜有人知的 Linux 命令

    Linux命令行吸引了大多数Linux爱好者.一个正常的Linux用户一般掌握大约50-60个命令来处理每日的任务.Linux命令和它们的转换对于Linux用户.Shell脚本程序员和管理员来说是最有 ...

  3. 菜鸟学习笔记4——jquery事件

    方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...

  4. 代码记录：使用Aforge.net让视频图像反转180度

    private void CameraConn() { videoSource = new VideoCaptureDevice(videoDevices[tscbxCameras.SelectedI ...

  5. Linux初识（转）

    文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基本原理.文件存储结构.软链接 ...

  6. Spring中@Resource与@Autoware

    问题 这其实就是@Autoware与@Resource没有正确的使用,这个错误是因为wmPoiOplogService这个变量装配方式是@Resource,按照@Resource的按名字查找的方式,并 ...

  7. c++ 一个类使用另外一个类的变量或方法

    如:a.cpp 声明 int a=9; 要在b.cpp文件中使用变量 a extern int a; int b=1; cout<<a+b; 结果为10;

  8. 嵌入式 RTSP流媒体播放器实现

    最近需要做一个RTSP流媒体播放器,研究了一下,封装了一个RTSP播放类CRTSPPlayer,解码库采用ffmpeg.由于需求比较简单,时间也有限,目前只实现了播放.停止.暂停几个基本的接口.下面是 ...

  9. ASP.NET Web API 帮助（help）页面上没有 Test API按钮的解决方法

    参与一个web API项目时发现它的help页面特别好用,不仅可以根据webapi的方法和注释自动生成帮助文档以方便查阅,还可以在这个页面上测试webapi方法.于是在自己新建项目时也打算将这个hel ...

  10. 使用SchemaSpy逆向工程生成数据库依赖关系使用SchemaSpy工具可以快速的从数据库中得到

    使用SchemaSpy逆向工程生成数据库依赖关系    使用SchemaSpy工具可以快速的从数据库中得到表的依赖关系,同时生成一个生动的“表图”结合的报告.方便快速了解数据库中的数据库对象间关系,类 ...