星形:

.star-six {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellow;
position: relative;
}
.star-six:after {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellow;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

五角星:

.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height:;
width:;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg); }
.star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}

五边形:

.pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: purple transparent;
top:50px;
}
.pentagon:before {
content: "";
position: absolute;
height:;
width:;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent purple;
}

六边形:

.hexagon {
width: 100px;
height: 55px;
background: #6c6;
position: relative;
}
.hexagon:before {
content: "";
position: absolute;
top: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #6c6;
}
.hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #6c6;
}

八边形:

.octagon {
width: 100px;
height: 100px;
background: orange;
position: relative;
} .octagon:before {
content: "";
position: absolute;
top:;
left:;
border-bottom: 29px solid orange;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height:;
} .octagon:after {
content: "";
position: absolute;
bottom:;
left:;
border-top: 29px solid orange;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height:;
}

心形:

.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top:;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left:;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

梯形:

.triangle {
border-bottom: 100px solid #F36823;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height:;
width: 100px;
}

css3 绘制图形的更多相关文章

  1. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  2. CSS图形基础:纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  3. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  4. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  5. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. CSS3绘制旋转的太极图案(一)

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  8. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  9. WPF2D绘制图形方法

    我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...

随机推荐

  1. CUDA跟OpenCV的混合编程,注意OpenCV需要重新编译

    1.注意事项 编译的办法参见: http://blog.csdn.net/wangyaninglm/article/details/39997113   以下是程序代码,网上搜的例子: 注意事项:32 ...

  2. 查询oracle数据库的数据库名、实例名、ORACLE_SID

    数据库名.实例名.数据库域名.全局数据库名.服务名 , 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数 ...

  3. rails关于user密码hash的重构

    rails应用程序中一个model名为User,其中存放了用户名和对应的密码.User模式类中建立了1个虚拟属性password用来存放用户实际输入的密码;而最终数据库的密码需要计算password的 ...

  4. 恶补web之三:http学习

    http是超文本传输协议的简称,该协议设计目的是保证客户机与服务器之间的通信.http的工作方式为客户机与服务器之间的请求-应答协议. 一般来说web浏览器是客户端,计算机上的网络应用程序可能作为服务 ...

  5. MOOS学习笔记——多线程

    /* * A simple example showing how to use a comms client */ #include "MOOS/libMOOS/Comms/MOOSAsy ...

  6. miniUI Grid添加汇总行,Grid绑定数据,IDEA免编译设置

    坑1: 2017-6-5周二,上午解决了昨天摸索一下午的问题,使用miniui显示汇总行数据,要点有这么几个 在创建Grid div的时候一定要加上以下两个属性: //显示汇总行开关 showSumm ...

  7. jstack Dump

    jstack Dump 日志文件中的线程状态 dump 文件里,值得关注的线程状态有: 死锁,Deadlock(重点关注)  执行中,Runnable 等待资源,Waiting on conditio ...

  8. NewLife.Net——网络压测单机1.88亿tps

    NewLife.Net压力测试,峰值4.2Gbps,50万pps,消息大小24字节,消息处理速度1.88亿tps! 共集合20台高配ECS参与测试,主服务器带宽6Gbps.100万pps,16核心64 ...

  9. 分享一下 常用的转换方法(例如:数字转金钱,文本与html互转等)

    public sealed class SAFCFormater { /// <summary> /// 文本格式到HTML /// </summary> /// <pa ...

  10. 架构之微服务设计(Nginx + Upsync)

    Upsync,微博开源基于Nginx容器动态流量管理方案 . Nginx 以其超高的性能与稳定性,在业界获得了广泛的使用,微博的七层就大量使用了 Nginx .结合 Nginx 的健康检查模块,以及动 ...