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 ...
随机推荐
- golang语言中os包的学习与使用(文件，目录，进程的操作)
os中一些常用函数的使用: package main; import ( "os" "fmt" "time" "strings&q ...
- Oracle Telnet 1521 失败
作中发现自己的电脑“telnet 127.0.0.1 1521”(注意:不要拼成telnet 127.0.0.1:1521 ) 可以通过,但是使用localhost.主机名来telnet,则失败. 解 ...
- JSON与GSON比较
JSON: 是Android SDK官方的库,所以在开发移动端的工程时就必须使用JSON.进行数据的转换和处理 GSON: GSON适用于服务端,gson比json功能更加强大.比如在集合类的处理.自 ...
- ES6 Reflect的认识
首先我们要了解一下,为什么会新添加这么一个全局对象?如果你看过Reflect的一些函数,你就会发现,这个对象上的方法基本上都可以从Object上面找到,找不到的那些,也是可以通过对对象命令式的操作去实 ...
- SQL注入漏洞的原理
在平常生活中,我们登陆某网页,常常需要输入用户名和密码,点击登陆,即可登陆成功. 对于黑客来说,不需要用户名和密码,只输入 admin '— 也可以登陆成功. 黑客利用的这种漏洞就是SQL Injec ...
- mount重新挂载为写模式
mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system mount -o remount,rw -t rootfs rootfs /
- vue 中使用keepAlive状态保持
keepAlive状态保持 1 主要实现原理,状态保持的路由不会执行生命周期的钩子函数,只有第一次进入页面会执行钩子函数. 2 设置当前页面保持keepAlive 直接在路由meta中配置即可 m ...
- Collection和Collections的区别是什么
1)java.util.Collection是一个集合顶层接口,该接口的设计目的是为各种具体的集合提供最大化的统一的操作方式,它提供了对集合对象进行基本操作的通用接口方法,实现该接口的类主要有List ...
- [SoapUI] Property Expansion in soapUI
1. Property Expansion in soapUI SoapUI provides a common syntax to dynamically insert ("expand& ...
- SSRF-php初探
0x00 前言 1) SSRF的概念很好理解,请自行百度. 2) JAVA/PHP/PYTHON都存在SSRF漏洞(至于其他语言的情况,了解粗浅尚不得知). 3) SSRF的利用方式 ...