利用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. 51nod1175 区间中第K大的数

    裸的主席树. #include<cstdio> #include<cstring> #include<cctype> #include<algorithm&g ...

  2. 在view中常见的四种方法的使用场合

    四种方法,使view创建好里面就有东西:[1.init  2.initWithFrame使用代码创建的时候.(从文件创建的时候不一定调用:1.init  2.initWithFrame这两个方法) 3 ...

  3. o4.数组指针和指针数组的区别

    ------- android培训.iOS培训.期待与您交流! ---------- 我们看一下数组指针和指针数组: 数组指针(也称行指针)定义 int (*p)[n];()优先级高,首先说明p是一个 ...

  4. php 获取301 302的真实地址

    function getRealURL($url){ $header = get_headers($url,1); if (strpos($header[0],'301') || strpos($he ...

  5. Python [Leetcode 342]Power of Four

    题目描述: Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Examp ...

  6. EL&struts2标签 读取map,list集合

    struts中的取map和list & jsp中取map和list <% List list = new ArrayList(); list.add("a"); li ...

  7. 【NYOJ-35】表达式求值——简单栈练习

    表达式求值 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近又学会了一些简单的函数求值,比如,它知道函数min ...

  8. ssh 或者 scp 无需输入密码的解决办法

    这里假设主机A(192.168.100.3)用来获到主机B(192.168.100.4)的文件.   在主机A上执行如下命令来生成配对密钥: ssh-keygen -t rsa   遇到提示回车默认即 ...

  9. iOS 开发者必不可少的 75 个工具,你都会了吗

    如果你去到一位熟练的木匠的工作室,你总是能发现他/她有一堆工具来完成不同的任务. 软件开发同样如此.你可以从软件开发者如何使用工具中看出他水准如何.有经验的开发者精于使用工具.对你目前所使用的工具不断 ...

  10. hdu 1166 敌兵布阵（线段树单点更新，区间查询）

    题意:区间和 思路:线段树 #include<iostream> #include<stdio.h> using namespace std; #define MAXN 500 ...