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 ...
随机推荐
- 交叉编译libudev
一.交叉编译libudev下载udev-182.tar.xz 下载网址:https://mirrors.edge.kernel.org/pub/linux/utils/kernel/hotplug/ ...
- MultiImageSelector 仿微信选择多张图片回调
项目可以去github下载 : https://github.com/lovetuzitong/MultiImageSelector 第0步 把模块 multi-image-selector 作为你的 ...
- JFinal Web开发学习(八)后台集成H-ui-admin前端框架
h-ui-admin是一个很不错的前端框架h-ui实现的一个后台管理系统的前端. 1.在WebRoot目录下新建admin目录 2.下载h-ui-admin(当前最新是2.5版本)并解压至admin文 ...
- Struts框架的数据封装二之模型驱动方式
Struts2中提供了两类数据封装的方式? * 第二种方式:模型驱动 > 使用模型驱动的方式,也可以把表单中的数据直接封装到一个JavaBean的对象中,并且表单的写法和之前的写法没有区别! & ...
- WebAPI传参
1.GET请求传递参数 URL传参:http://localhost/ApiTest/test?id=1 API接收参数 [HttpGet] public string GetUser(int id) ...
- hdu 5461(2015沈阳网赛 简单暴力) Largest Point
题目;http://acm.hdu.edu.cn/showproblem.php?pid=5461 题意就是在数组中找出a*t[i]*t[i]+b*t[j]的最大值,特别注意的是这里i和i不能相等,想 ...
- snort学习笔记
Snort有三种工作模式:嗅探器.数据包记录器.网络入侵检测系统(ids). 嗅探器模式仅仅是从网络上读取数据包并作为连续不断的流显示在终端上. 数据包记录器模式把数据包记录到硬盘上. 网络入侵检测模 ...
- java集合示例 小心重载的陷阱
package com.hra.riskprice; import com.hra.riskprice.SysEnum.Factor_Type; import org.springframework. ...
- 三大框架中各种xml的存放位置
web.xml中classpath:和classpath*: 有什么区别? classpath:只会到你的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar ...
- Windows 8.1 app 界面设计
大纲: Windows 应用商店应用 UI 详细信息 http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/dn263191.aspx 快 ...