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. 转：mysql group by 用法解析(详细)

    group by 用法解析 group by语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表. SELECT子句中的列名必须为分组列或列函数.列函数对于GROUP BY子 ...

  2. bit & byte & B & KB & Kbps & KBps & ps

    存储单位bit & byte & B & KB & Kbps & KBps & ps    (bit,位:byte,字节:区别) Bit,位 :二进制数 ...

  3. 【kmp算法】poj2406 Power Strings

    如果next[n]<n/2,一定无解. 否则,必须要满足n mod (n-next[n]) = 0 才行,此时,由于next数组的性质,0~n-next[n]-1的部分一定是最小循环节. [ab ...

  4. [POI2018]Prawnicy

    题目大意: 有$n(n\le10^6)$个线段,每个线段覆盖的范围是$[l_i,r_i]$,要求从中选取$k(k\le10^6)$个线段使得这些线段覆盖范围的交集最大,求最大交集及任意一种方案. 思路 ...

  5. Swift中结合使用枚举与Switch

        定义:       用法:  

  6. Swift中计算String的长度

        extension String {     var length: Int { return countElements(self) }  // Swift 1.1 } extension ...

  7. Delphi Thread

    Thread给几点说明:1.MyThread的实例作为TForm1的成员变量2.不要使用Form1这个全局变量,线程中可要使用它的Handle,你可以在Form中创建MyThread的实例时把Hand ...

  8. 深入了解JavaScript权威指南

    JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删.JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等.JavaScript对象除了可以保持自有的 ...

  9. ios滚动UIScrollView的setContentOffset方法

    在UIScrollView,setContentOffset方法的功能是跳转到你指定内容的坐标,[self.scroview setContentOffset:CGPointMake(0, 50) a ...

  10. jquery的confirm插件介绍

    参考:1.http://craftpip.github.io/jquery-confirm/ 2.http://www.bootcdn.cn/jquery-confirm/readme/    3.h ...