HTML:

 <!DOCTYPE html>

 <html>

 <head>

     <title>css各种形状</title>

     <link rel="stylesheet" type="text/css" href="css/xianghzuang.css">

 </head>

 <body>

 <div class="shape-square0"></div>

 <div class="shape-square1"></div>

 <div class="shape-square2"></div>

 <div class="shape-square3"></div>

 <div class="shape-square4"></div>

 <div class="shape-square5"></div>

 <div class="shape-square6"></div>

 <div class="shape-square7"></div>

 <div class="shape-square8"></div>

 <div class="shape-square9"></div>

 <div class="shape-square10"></div>

 <div class="shape-square11"></div>

 <div class="shape-square12"></div>

 <div class="shape-square13"></div>

 <div class="shape-square14"></div>

 <div class="shape-square15"></div>

 <div class="shape-square16"></div>

 <div class="shape-square17"></div>

 <div class="shape-square18"></div>

 <div class="shape-square19"></div>

 <div class="shape-square20"></div>

 <div class="shape-square21"></div>

 <div class="shape-square22"></div>

 <div class="shape-square23"></div>

 <div class="shape-square24"></div>

 <div class="shape-square25"></div>

 <div class="shape-square26"></div>

 <div class="shape-square27"></div>

 <div class="shape-square28"></div>

 <div class="shape-square29"></div>

 <div class="shape-square30"></div>

 <div class="shape-square31"></div>

 <div class="shape-square32"></div>

 <div class="shape-square33"></div>

 <div class="shape-square34"></div>

 <div class="shape-square35"></div>

 <div class="shape-square36"></div>

 <div class="shape-square37"></div>

 <div class="shape-square38"></div>

 <div class="shape-square39"></div>

 <div class="shape-square40"></div>

 <div class="shape-square41"></div>

 <div class="shape-square42"></div>

 <div class="shape-square43"></div>

 <div class="shape-square44"></div>

 <div class="shape-square45"></div>

 <div class="shape-square46"></div>

 <div class="shape-square47"></div>

 <div class="shape-square48"></div>

 <div class="shape-square49"></div>

 <div class="shape-square50"></div>

 <div class="shape-square51"></div>

 <div class="shape-square52"></div>

 <div class="shape-square53"></div>

 <div class="shape-square54"></div>

 <div class="shape-square55"></div>

 <div class="shape-square56"></div>

 <div class="shape-square57"></div>

 <div class="shape-square58"></div>

 <div class="shape-square59"></div>

 <div class="shape-square60"></div>

 </body>

 </html>

CSS:

 @charset "utf-8";

 div{display: inline-block;margin:40px;}

 @-webkit-keyframes rotateA {0%{ -webkit-transform:rotate(0deg);}100%{-webkit-transform: rotate(360deg);}}

 .shape-square0{width:0;height:0;border-style: solid;border-color:palegoldenrod palevioletred pink paleturquoise;border-width:50px;}

 .shape-square1{width:100px;height:100px;background: #000;border-top-left-radius:50px;}

 .shape-square2{width:100px;height:100px;background: #000;border-top-left-radius:60px;border-bottom-right-radius: 60px;}

 .shape-square3{width:100px;height:100px;background: #000;border-top-left-radius:50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;}

 .shape-square4{width:100px;height:100px;background: #000;border-top-right-radius:50px;border-bottom-right-radius: 50px;}

 .shape-square5{width:100px;height:100px;background: #000;border-radius: 50px;}

 .shape-square6{width:100px;height:100px;background: #000;}

 .shape-square7{width:100px;height:100px;background: #000;-webkit-transform:rotate(45deg);}

 .shape-square8{border-top:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #000;width:60px;height:0;position: relative;top:-60px;}

 .shape-square8:after{position:absolute;top: 20px;left: -20px;width: 0;height: 0;border-top:70px solid #000;border-bottom:0;border-left:50px solid transparent;border-right:50px solid transparent;content:"";}

 .shape-square9{width:0;height:0;border-style: solid;border-width:0 25px 60px 25px;border-color:transparent transparent #000 transparent;position: relative;top:-50px;}

 .shape-square9:after{content:"";width:0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-width:60px 25px 0 25px;position: absolute;left:-25px;top:60px;}

 .shape-square10{width:60px;height:60px;border-top:20px solid transparent;border-right:20px solid transparent;border-left:20px solid #000;border-bottom:20px solid #000;border-radius: 50%;-webkit-animation:rotateA 1.2s infinite linear;}

 .shape-square11{width:100px;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:0;border-bottom:100px solid #000;}

 .shape-square12{width:0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 45px 50px 45px;position: relative;top:-56px;}

 .shape-square12:after{content:"";width:50px;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-width:50px 20px 0 20px;position: absolute;top:50px;left:-45px;}

 .shape-square13{width:100px;height:50px;background: #000;position: relative;}

 .shape-square13:before{content:"";width:0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 50px 30px 50px;position: absolute;top:-30px;left:0;}

 .shape-square13:after{content:"";width:0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-width:30px 50px 0 50px;position: absolute;top:50px;left:0;}

 .shape-square14{width:100px;height:50px;background: #000000;position: relative;}

 .shape-square14:before{content:"";width:40px;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 30px 30px 30px;position: absolute;top:-30px;left:0;}

 .shape-square14:after{content:"";width:40px;height:0;border-style: solid;border-color: #000 transparent transparent transparent;border-width:30px 30px 0 30px;position: absolute;top:50px;left:0;}

 .shape-square15{width:100px;height:40px;background: #000;}

 .shape-square16{width:80px;height: 40px;background: #000;position:relative;}

 .shape-square16:before{content:"";border-style: solid;border-color:#000 transparent transparent transparent;border-width:40px 0 0 20px;position: absolute;top:0;left:-20px;}

 .shape-square16:after{content:"";border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 20px 40px 0;position: absolute;top:0;left:80px;}

 .shape-square17{width:80px;height:40px;background: #000;position: relative;}

 .shape-square17:before{content:"";border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 0 40px 20px;position: absolute;top:0;left:-20px;}

 .shape-square17:after{content:"";border-style: solid;border-color:#000 transparent transparent transparent;border-width:40px 20px 0 0;position: absolute;top:0;left:80px;}

 .shape-square18{width:50px;height:80px;background: #000;-webkit-transform:rotate(-45deg);border-top-left-radius: 40px;border-top-right-radius: 40px;position: relative;}

 .shape-square18:after{content:"";width:50px;height:80px;background: #000;-webkit-transform:rotate(90deg);border-top-left-radius: 40px;border-top-right-radius: 40px;position: absolute;left:15px;top:15px;}

 .shape-square19{width:0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 50px 100px 50px;}

 .shape-square20{width:0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-width:100px  50px 0 50px;}

 .shape-square21{width:0;height:0;border-style: solid;border-color:transparent transparent transparent #000;border-width:50px 0 50px 100px;}

 .shape-square22{width:0;height:0;border-style: solid;border-color:transparent #000 transparent transparent;border-width:50px 100px 50px 0;}

 .shape-square23{width:0;height:0;border-style: solid;border-color: #000 transparent transparent transparent;border-width:100px 0  0 100px;}

 .shape-square24{width:0;height:0;border-style: solid;border-color: #000 transparent transparent transparent;border-width:100px 100px  0  0;}

 .shape-square25{width:0;height:0;border-style: solid;border-color: transparent transparent #000 transparent;border-width:0 100px  100px  0;}

 .shape-square26{width:0;height:0;border-style: solid;border-color: transparent transparent #000 transparent;border-width:0  0  100px  100px;}

 .shape-square27:before{content:"";width:0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 40px 30px 40px;position:absolute;top:-30px;left:-25px;}

 .shape-square27{width:30px;height:60px;background: #000;position:relative;}

 .shape-square28{width:30px;height:60px;background: #000;position:relative;top:-30px;}

 .shape-square28:after{content:"";width:0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-width:30px 40px 0 40px;position: absolute;top:60px;left:-25px;}

 .shape-square29{width:60px ;height:30px;background: #000;position: relative;left:20px;top:-30px;}

 .shape-square29:before{content:"";width:0;height:0;border-style: solid;border-color:transparent #000 transparent transparent;border-width:40px 30px 40px 0;position: absolute;top:-25px;left:-30px;}

 .shape-square30{width:60px ;height:30px;background: #000;position: relative;left:20px;top:-30px;}

 .shape-square30:after{content:"";width:0;height:0;border-style: solid;border-color:transparent transparent transparent #000;border-width:40px 0 40px 30px;position: absolute;top:-25px;left:60px;}

 .shape-square31{width:100px;height:50px;background:#000;border-radius:50%;}/*画椭圆；*/

 .shape-square32{width:100px;height:50px;background: #000;border-top-left-radius: 50px;border-top-right-radius: 50px;}

 .shape-square33{width:100px;height:50px;background: #000;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;}

 .shape-square34{width:50px;height:100px;background: #000;border-top-left-radius: 50px;border-bottom-left-radius: 50px;}

 .shape-square35{width:50px;height:100px;background: #000;border-top-right-radius: 50px;border-bottom-right-radius: 50px;}

 .shape-square36{width:100px;height:100px;background: #000;border-top-left-radius: 100%;}

 .shape-square37{width:100px;height:100px;background: #000;border-top-right-radius: 100%;}

 .shape-square38{width:100px;height:100px;background: #000;border-bottom-right-radius: 100%;}

 .shape-square39{width:100px;height:100px;background: #000;border-bottom-right-radius: 100%;}

 .shape-square40{width:100px;height:100px;background: #000;border-radius: 50px;position: relative;}

 .shape-square40:before{content:"";width:50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(45deg);position: absolute;top:-12px;left:25px;}

 .shape-square41{width:100px;height:100px;background: #000;border-radius: 50px;position: relative;}

 .shape-square41:before{content:"";width:50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(135deg);position: absolute;top:25px;left:61px;}

 .shape-square42{width:100px;height:100px;background: #000;border-radius: 50px;position: relative;}

 .shape-square42:before{content:"";width:50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(-45deg);position: absolute;top:25px;left:-12px;}

 .shape-square43{width:100px;height:100px;background: #000;border-radius: 50px;position: relative;}

 .shape-square43:before{content:"";width:50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(-135deg);position: absolute;top:62px;left:25px;}

 .shape-square44{width:100px;height:100px;background: #000;position: relative;border-radius:25px;-webkit-animation:rotateA 3s infinite linear;}

 .shape-square44:before{content:"";width:100px;height:100px;background: #000;-webkit-transform:rotate(45deg);position: absolute;border-radius: 25px;}

 .shape-square45{width:0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 50px 80px 50px;position: relative;}

 .shape-square45:after{content:"";width:0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-width:80px 50px 0 50px;position:absolute;top:25px;left:-50px;}

 .shape-square46{width:100px;height:100px;background: #000;position: relative;}

 .shape-square46:before{content:"";background: #000;width:100px;height:100px;position: absolute;-webkit-transform:rotate(-30deg);}

 .shape-square46:after{content:"";background: #000;width:100px;height:100px;position: absolute;-webkit-transform:rotate(-60deg);}

 .shape-square47{background: #000;width:40px;height:100px;-webkit-transform:rotate(-45deg);position: relative}

 .shape-square47:after{content:"";background: #000;width:40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;}

 .shape-square48{background: #000;width:40px;height:100px;-webkit-transform:rotate(-45deg);position: relative;border-radius: 20px;}

 .shape-square48:after{content:"";background: #000;width:40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;border-radius: 20px;}

 .shape-square49{background: #000;width:40px;height:100px;position: relative}

 .shape-square49:after{content:"";background: #000;width:40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;}

 .shape-square50{background: #000;width:40px;height:100px;position: relative;border-radius: 20px;}

 .shape-square50:after{content:"";background: #000;width:40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;border-radius: 20px;}

 .shape-square51{width:30px;height:30px;border:10px solid #000;border-radius: 50%;position: relative;}

 .shape-square51:after{content:"";background: #000;width:10px;height:50px;-webkit-transform:rotate(-45deg);position: absolute;top:20px;left:38px;}

 .shape-square52{width:20px;height:20px;border:20px solid #000;border-radius: 50%;position: relative;}

 .shape-square52:after{content:"";border-style: solid;border-color:#000 transparent transparent transparent;border-width:30px 20px 0 20px;position: absolute;top:31px;left:-10px;}

 .shape-square53{background: #000;width:100px;height:60px;border-radius: 10px;position: relative;}

 .shape-square53:after{content:"";width:0;height:0;border-style: solid;border-color:transparent #000 transparent transparent;border-width:10px 15px 10px 0;position: absolute;top:20px;left:-15px;}

 .shape-square54{width:96px;height:49px;background:#fff;border-color:#000;border-style: solid;border-width:2px 2px 50px 2px;border-radius:100%;position: relative;-webkit-animation:rotateA 1.2s infinite linear;}

 .shape-square54:before{content:"";width:12px;height:12px;border-radius: 50%;background:#fff; position: absolute;top:25px;left:0px;border:18px solid #000;}

 .shape-square54:after{content:"";width:12px;height:12px;background: #000;border:18px solid #fff;border-radius: 50%;position: absolute;top:25px;left:48px;}

 .shape-square55{width:50px;height:100px;background: #000;position: relative;}

 .shape-square55:after{content:"";width:0;height:0;border-style: solid;border-color: transparent transparent #fff transparent;border-width:0 25px 30px 25px;position: absolute;top:70px;}

 .shape-square56{width:50px;height:80px;background: #fff;border-color:#000;border-width:20px 10px 20px 10px;border-style: solid;border-radius: 4px;position: relative;}

 .shape-square56:before{content:"";width:20px;height:3px;background: #fff;position: absolute;top:-10px;left:15px;}

 .shape-square56:after{content:"";width:4px;height:4px;background: #fff;border-radius: 2px;position: absolute;top:90px;left:23px;}

 .shape-square57{width:100px;height:50px;background: #fff;border-style: solid;border-color:#000;border-width:6px;border-radius: 4px;position: relative;}

 .shape-square57:before{content:"";width:70px;height:40px;background: #000;position: absolute;top:5px;left:5px;}

 .shape-square57:after{content:"";width:5px;height:20px;background: #fff;border-style: solid;border-color: #000;border-width:8px 8px 8px 0;border-top-right-radius:4px;border-bottom-right-radius:4px;position: absolute;top:10px;left:106px;}

 .shape-square58{width:100px;height:100px;background: #000;-webkit-transform:rotate(45deg);border-top-left-radius: 75px;border-bottom-right-radius: 75px;position: relative;}

 .shape-square58:after{content:"";width:25px;height:25px;background: #000;border-style: solid;border-color: #fff;border-width:25px;border-radius:100%;position: absolute;top:13px;left:12px;-webkit-transform:rotate(45deg);}

 .shape-square59{position: relative;color:#000;width:0;height:0;border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid #000;-webkit-transform:rotate(35deg);}

 .shape-square59:before{content:"";width:0; height:0; border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:80px solid #000;position: absolute;top:-45px;left:-65px;-webkit-transform:rotate(-35deg);}

 .shape-square59:after{content:"";width:0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-width:0 100px 70px 100px;position: absolute;top:3px;left:-105px;-webkit-transform:rotate(-70deg);}

 .shape-square60{width:212px;height:100px;position: relative;}

 .shape-square60:before{content:"";top:0;left:0;position: absolute;width:60px;height:60px;border-radius: 50px 50px 0 50px;border:20px solid #000;-webkit-transform:rotate(-40deg);}

 .shape-square60:after{content:"";position: absolute;top:0;left:112px;width:60px;height:60px;border:20px solid #000;border-radius: 50px 50px 0 50px;-webkit-transform:rotate(130deg);}

css制作的61种图像的更多相关文章

  1. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  2. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  3. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  6. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  7. Adobe Edge Animate –使用css制作菜单

    Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:

  8. css制作最简单导航栏

    css制作最简单导航栏

  9. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

随机推荐

  1. 带WHERE子句的UPDATE语句

    目前演示的几个UPDATE语句都是一次性更新所有行的数据,这无法满足只更新符合特定条件的行的需求,比如“将Tom 的年龄修改为12 岁”.要实现这样的功能只要使用WHERE 子句就可以了,在WHERE ...

  2. JDBC操作数据库的基本流程

    所有的JDBC应用程序都具有下面的基本流程: 1.加载数据库驱动并建立到数据库的连接. 2.执行SQL语句. 3.处理结果. 4.从数据库断开连接释放资源. 下面我们就来仔细看一看每一个步骤: 其实按 ...

  3. 【数论】【枚举约数】【友好数】CODEVS 2632 非常好友

    O(sqrt(n))枚举约数,根据定义暴力判断友好数. #include<cstdio> #include<cmath> using namespace std; int n; ...

  4. JavaScript中的模块化之AMD和CMD

    前言: 为什么我们需要模块化开发,模块化开发的好处有哪些? 首先我们先说一下非模块化的开发方式带来的弊端. 非模块化开发中会导致一些问题的出现,变量和函数命名可能相同,会造成变量污染和冲突,并且出错时 ...

  5. vmware已经全面支持open-vm-tools

    以后不用再为vmware vm单独安装vmware-tools了,vmware已经全面支持open-vm-tools, 今天突然发现安装vmware-tools时出现deprecated提示,原来vm ...

  6. jstack来分析。当linux出现cpu被java程序消耗过高时

    我们使用jdk自带的jstack来分析.当linux出现cpu被java程序消耗过高时,以下过程说不定可以帮上你的忙: 1.top查找出哪个进程消耗的cpu高 21125 co_ad2    18   ...

  7. 实现Xshell断开连接情况下Linux命令继续执行

    1.将原命令语句改为:nohup 命令语句 & 2.回车执行,再回车,窗口中会显示一个进程号 3.如果中途想关闭,可执行:kill -9 进程号.如果想查看命令执行情况,可执行:cat noh ...

  8. SVN服务的部署及使用

      环境说明 系统版本     CentOS 7.2 x86_64   SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是 ...

  9. js动态创建和删除option

    1.动态创建select function createSelect(){           var mySelect = document.createElement("select&q ...

  10. [TypeScript] Export public types from your library

    If you're a library author, it's useful to expose your public types as interfaces, to allow your con ...