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 ...

随机推荐

Nginx+Tomcat 实现动态分离，负载均衡
什么是动静分离为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源比如图片,js,css等文件,我们可以在反向代理服务器中进行缓存,这样浏览器在请求一个静态资源时 ...
浅谈Session与Cookie的区别与联系
一.Session的概念 Session 是存放在服务器端的,类似于Session结构来存放用户数据,当浏览器第一次发送请求时,服务器自动生成了一个Session和一个Session ID用来唯一标 ...
webpack.base.conf.js
var path = require('path')var utils = require('./utils')var config = require('../config')var vueLoad ...
php使用pthreads v3多线程的抓取新浪新闻信息
我们使用pthreads,来写一个多线程的抓取页面小程序,把结果存到数据库里. 数据表结构如下: CREATE TABLE `tb_sina` ( `id` int(11) unsigned NOT ...
u-boot之ARM920T的start.S分析
cpu/arm920t/start.S程序步骤大致有以下几个 1.设置中断向量表 2.设置CPU模式为SVC32 mode并且关闭IRQ与FIQ中断 3.关闭看门狗 4.屏蔽所有中断 5.判断程序是否 ...
解决 win 7 64 位 vs2010 调试silverlight项目无法加载，提示更新developer ,跟新报消息 ID: 1517 已安装了 Silverlight 的 64 位版本
出现上面的问题是我们安装的silverlight的版本和系统给的silverlight下载的版本冲突, 解决的方法是,首先卸载Silverlight runtime(也就是默认的silverlight ...
ubuntu下安装配置ADB
1.下载SDK Tools for Linux,地址:http://developer.android.com/sdk/index.html 2.解压,将 android-sdk-linux 文件夹放 ...
NC 6系后台调用接口保存单据
IPFBusiAction ipf = (IPFBusiAction)NCLocator.getInstance().lookup(IPFBusiAction.class); ipf.processA ...
Ubuntu 双网卡设置
闲话不多说,直接正题因为chinanet信号不强,所以买了个usb无线网卡,平常又要做开发,要连着开发板,不知怎么回事,一旦自带无线网卡连上内网的无线路由,就不能访问外网了. 网上搜了好久,终于查到 ...
Vim on Mac Terminal
2018-04-15 在Python 里面加标注, 发现Vim强大的两种用法, 比如要在1-5行加标注: 1. 用寻找和替代(basic search and replace),:1, 5s/^/# ...

css基本图形绘制（基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等）

css基本图形绘制（基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等）的更多相关文章

随机推荐

热门专题