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 ...
随机推荐
- java ATM模拟程序
//基本功能已经完善,文件读取没有问题,文件重写尚未完成. Account类 public class Account { //初始化参数 private String accountID; priv ...
- 4-java 格式化输出
java保留两位小数4种方法 import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberF ...
- python 学习笔记 ---- 数据类型
Python有五个标准的数据类型: Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) ① List 列表 和 Tuple 元组 ...
- jquery分页插件精选
1.最新的分页控件:Mricode.Pagination(推荐) https://github.com/mricle/Mricode.Pagination 2.Jquery Pagination Pl ...
- EmguCV Image类中的函数（二）使用MorphologyEx进行更多的变换
MorphologyEx中所有的变换如下图所示 调用方法: Mat aaa = CvInvoke.GetStructuringElement(Emgu.CV.CvEnum.ElementShape.R ...
- IIS站点工作原理与ASP.NET工作原理
IIS站点工作原理与ASP.NET工作原理 一.IIS IIS 7.0工作原理图 两种模式: 1.用户模式(User Mode)(运行用户的程序代码.限制在特定的范围内活动.有些操作必须要受到Ker ...
- CSS学习总结3：CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- C++命名空间学习笔记
1 模块化和界面 任何实际程序都是有一些部分组成的.通过将程序进行模块化可以使我们的程序更加清晰,有助于多人合作和维护. 将一个程序进行模块化以后,当其中一个模块调用另一个模块时,它不需要知道其具体实 ...
- PAT 甲级 1005 Spell It Right (20)（代码）
1005 Spell It Right (20)(20 分) Given a non-negative integer N, your task is to compute the sum of al ...
- java8 数据结构的改变（二） 对ConcurrentHashMap影响
https://www.cnblogs.com/study-everyday/p/6430462.html http://www.importnew.com/22007.html