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 ...
随机推荐
- 本地DNS解析
企业搭配本地域名,进行解析 2018年07月23日 09:31:46 阅读数:2 搭建dns服务器,可以进行域名解析,这样方便企业项目本地测试. 可以实现,输入域名访问本地服务器 一.安装软件 1.下 ...
- Laravel常用命令行中文版
1.生成控制器 php artisan make:controller ArticleController 对应的会在app/http/controllers下面生成ArticleController ...
- linux命令学习之：chmod
chmod命令用来变更文件或目录的权限.在Linux系统家族里,文件或目录权限的控制分别以读取R.写入W.执行X3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件与目录 ...
- java 向上转型和向下转型
学习向上转型和向下转型怎么用没多难,但是为什么那样用,我搞了很多次没弄明白.没弄明白的原因是平时学习时之看例子,而例子一般都比较简单,没有对象之间的调用,一般就是一个对象调用自己的方法. 首先看下怎么 ...
- Django中反向生成models
我们在展示django ORM反向生成之前,我们先说一下怎么样正向生成代码. 正向生成,指的是先创建model.py文件,然后通过django内置的编译器,在数据库如mysql中创建出符合model. ...
- docker-ce-17.09 数据卷和数据卷容器
docker容器中管理数据两种方式:1.数据卷(Data Volumes)2.数据卷容器(Data Volume Dontainers) 一.数据卷特性:1.数据卷可以在容器之间共享和重用2.对数据卷 ...
- VS2013一次替换变量名
插件下载地址:https://visualstudiogallery.msdn.microsoft.com/164904b2-3b47-417f-9b6b-fdd35757d194 该插件目前只支持: ...
- Rime小狼毫个人配置文件
default.custom.yaml customization: distribution_code_name: Weasel distribution_version: 0.9.30 gener ...
- Qt5+VS2010的安装及使用
在我的博客<Win7下Qt5的安装及使用>中讲解了win7下Qt5+MinGW的安装及使用,本节再讲解win7下Qt5+VS2010的安装及使用.利用Qt5+MinGW开发应用程序比较麻烦 ...
- UI设计初学者必备的工具以及学习路线（附思维导图）
今天千锋UI设计小编着重为大家介绍5个学习ui设计必须要会的工具和软件以及UI设计学习路线,希望能对大家所帮助. UI设计必要的工具和软件 1.PS 图像处理合成软件 ui设计核心软件,强大的图像处理 ...