css基本图形绘制（基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等）
- 正方形：
- 代码：
<style>
.square {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
<div class="square "></div>- 效果：
- 长方形：
- 代码：
<style>
.rectangle {
width: 200px;
height: 100px;
background-color: cornflowerblue;
}
</style>
<div class="rectangle "></div>
- 效果：
- 代码：
- 圆形：
- 代码：
<style>
.circle {
width: 100px;
height: 100px;
background-color: cornflowerblue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
<div class="circle"></div> - 效果：
- 代码：
- 椭圆：
- 代码：
<style>
.oval {
width: 200px;
height: 100px;
background-color: cornflowerblue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
</style>
<div class="oval "></div> - 效果：
- 代码：
- 上三角：
- 代码：
<style>
.triangle-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid cornflowerblue;
}
</style>
<div class="triangle-up"></div> - 效果：
- 代码：
- 下三角：
- 代码：
<style>
.triangle-down{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid cornflowerblue;
}
</style>
<div class="triangle-down"></div> - 效果：
- 代码：
- 左三角：
- 代码：
<style>
.triangle-left{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid cornflowerblue;
border-bottom: 50px solid transparent;
}
</style>
<div class="triangle-left"></div> - 效果：
- 代码：
- 右上角：
- 代码：
<style>
.triangle-right{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid cornflowerblue;
border-bottom: 50px solid transparent;
}
</style>
<div class="triangle-right"></div> - 效果：
- 代码：
- 左上三角：
- 代码：
<style>
.triangle-topleft{
width: 0;
height: 0;
border-top: 100px solid cornflowerblue;
border-right: 100px solid transparent;
}
</style>
<div class="triangle-topleft"></div> - 效果：
- 代码：
- 右上三角：
- 代码：
<style>
.triangle-topright{
width: 0;
height: 0;
border-top: 100px solid cornflowerblue;
border-left: 100px solid transparent;
}
</style>
<div class="triangle-topright"></div> - 效果：
- 代码：
- 左下三角：
- 代码：
<style>
.triangle-bottomleft{
width: 0;
height: 0;
border-bottom: 100px solid cornflowerblue;
border-right: 100px solid transparent;
}
</style>
<div class="triangle-bottomleft"></div> - 效果：
- 代码：
- 右下三角：
- 代码：
<style>
.triangle-bottomright{
width: 0;
height: 0;
border-bottom: 100px solid cornflowerblue;
border-left: 100px solid transparent;
}
</style>
<div class="triangle-bottomright"></div> - 效果：
- 代码：
- 平行四边形：
- 代码：
<style>
.parallelogram{
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: cornflowerblue;
}
</style>
<div class="parallelogram"></div> - 效果：
- 代码：
- 梯形：
- 代码：
<style>
.trapezoid {
border-bottom: 100px solid cornflowerblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
<div class="trapezoid"></div> - 效果：
- 代码：
- 六角星：
- 代码：
<style>
.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid cornflowerblue;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid cornflowerblue;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<div class="star-six"></div> - 效果：
- 代码：
- 五角星：
- 代码：
<style>
.star-five {
position: relative;
display: block;
color: cornflowerblue;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid cornflowerblue;
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 cornflowerblue;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
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: cornflowerblue;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid cornflowerblue;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
</style>
<div class="star-five"></div> - 效果：
- 代码：
- 五角大楼：
- 代码：
<style>
.pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: cornflowerblue transparent;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent cornflowerblue;
}
</style>
<div class="pentagon"></div> - 效果：
- 代码：
- 六边形：
- 代码：
<style>
.hexagon{
width: 100px;
height: 55px;
background: cornflowerblue;
position: relative;
}
.hexagon:before{
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid cornflowerblue;
}
.hexagon:after{
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid cornflowerblue;
}
</style>
<div class="hexagon"></div> - 效果：
- 代码：
- 八角形：
- 代码：
<style>
.octagon {
width: 100px;
height: 100px;
background: cornflowerblue;
position: relative;
}
.octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid cornflowerblue;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
.octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid cornflowerblue;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>
<div class="octagon"></div> - 效果：
- 代码：
- 爱心：
- 代码：
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: cornflowerblue;
-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: 0;
-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%;
}
</style>
<div class="heart"></div> - 效果：
- 代码：
- 无穷大符号：
- 代码：
<style>
.infinity {
position: relative;
width: 212px;
height: 100px;
}
.infinity:before,
.infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid cornflowerblue;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div class="infinity"></div> - 效果：
- 代码：
- 鸡蛋：
- 代码：
<style>
.egg {
display:block;
width: 126px;
height: 180px;
background-color: cornflowerblue;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>
<div class="egg"></div> - 效果：
- 代码：
- 食逗人（Pac-Man）：
- 代码：
<style>
.pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid cornflowerblue;
border-left: 60px solid cornflowerblue;
border-bottom: 60px solid cornflowerblue;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
</style>
<div class="pacman"></div> - 效果：
- 代码：
- 提示对话框：
- 代码：
<style>
.talkbubble {
width: 120px;
height: 80px;
background: cornflowerblue;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid cornflowerblue;
border-bottom: 13px solid transparent;
}
</style>
<div class="talkbubble"></div> - 效果：
- 代码：
- 12角星：
- 代码：
<style>
.burst-12 {
background: cornflowerblue;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
.burst-12:before, .burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: cornflowerblue;
}
.burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
</style>
<div class="burst-12"></div> - 效果：
- 代码：
- 8角星：
- 代码：
<style>
.burst-8 {
background: cornflowerblue;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
.burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: cornflowerblue;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
</style>
<div class="burst-8"></div> - 效果：
- 代码：
- 钻石：
- 代码：
<style>
.cut-diamond {
border-style: solid;
border-color: transparent transparent cornflowerblue transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
}
.cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: cornflowerblue transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
</style>
<div class="cut-diamond"></div> - 效果：
- 代码：
- 阴阳八卦（霸气的这个）：
- 代码：
<style>
.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: cornflowerblue;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid cornflowerblue;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: cornflowerblue;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
<div class="yin-yang"></div> - 效果：
- 代码：
css基本图形绘制（基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等）的更多相关文章
- CSS 不规则图形绘制
基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...
- CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
- 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...
- UI设计篇·入门篇·绘制简单自定义矩形图/设置按钮按下弹起颜色变化/设置图形旋转
Android的基本控件和图形有限,难以满足所有的实际需要和设计需求,好在Android给出了相对完善的图形绘制和自定义控件的API,利用这些API,可以基本满足设计的需求. 自定义图像和控件的方法: ...
- 纯CSS画的基本图形(圆形、三角形、多边形、爱心、八卦等)
1.圆形 .circle { width: 100px; height: 100px; background: red; border-radius: 50px; } 2.椭圆 .oval { wid ...
- 图形绘制 Canvas Paint Path 详解
图形绘制简介 Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0.大部分2D使用的api都在android.grap ...
- HTML5图形绘制学习（1）-- Canvas 元素简介
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...
- [github项目]基于百度地图二次开发实现的车辆监管（包含车辆定位、车辆图片和方向控制，电子围栏，图形绘制等功能）前端实现(不包含后端实现)
前言:基于百度地图javascript版本开发,百度地图中所用的key已承诺仅用于测试,不用于商业用途 注:本文所有代码可以到github上进行下载,github地址:http://map.eguid ...
随机推荐
- ReactPHP── PHP版的Node.js（转）
原文地址:http://www.csdn.net/article/2015-10-12/2825887 摘要:ReactPHP作为Node.js的PHP版本.在实现思路,使用方法,应用场景上的确有很多 ...
- jsplumb流程器使用2
jsplumb默认注册在浏览器的窗口,为整个页面提供静态实例 1. 单独实例化的方法: var firstInstance = jsPlumb.getInstance(); 内部传入可定义对象 全 ...
- SqlServer2014导出数据库的数据字典-最新版本(字段说明也能导出)
--移动360导出数据字典 -- --快速查看表结构(比较全面的) THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , col.name AS ...
- Java并发-ConcurrentModificationException原因源码分析与解决办法
一.异常原因与异常源码分析 对集合(List.Set.Map)迭代时对其进行修改就会出现java.util.ConcurrentModificationException异常.这里以ArrayList ...
- MFC 一个无参线程的CreateThread 使用
最近想把c#的一个工作中用到的软件用MFC 实现出来, 刚下手 要了解的东西挺多,不但要对c++的语法,大体看一遍. 还要看MFC 内一些窗体,之类的相关的定义,比如cpp ,.h 内的类的定义方式等 ...
- 动态加载JS脚本到HTML
如果用原生态的js 有2中方法 1.直接document.write <script language="javascript"> document.wr ...
- 5C - A == B ?
Give you two numbers A and B, if A is equal to B, you should print "YES", or print "N ...
- spring batch遇到的一些问题
1.Spring Batch - A job instance already exists: JobInstanceAlreadyCompleteException 这是因为JobParameter ...
- Linux renew ip command
$ sudo dhclient -r //release ip 释放IP$ sudo dhclient //获取IP Now obtain fresh IP:$ sudo dhcli ...
- Shortest Unsorted Continuous Subarray LT581
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...