`

CSS画基本图形

    博客分类：
  • CSS
CSS分享 
阅读更多

 

      精彩分享

      CSS画基本图形，图形包括基本的矩形、圆形、 椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性。

 

------------------------------------------------------------------------------------------------------------------------------------

 

/*正方形*/
.square{ width:100px; height:100px; background:red;}

  效果图：

------------------------------------------------------------------------------------------------------------------------------------

 

/*长方形*/
.rectangle{ width:200px; height:100px; background:red;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*圆形*/
.circle{ width:100px; height:100px; background:red; border-radius:50%;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*椭圆*/
.oval{ width:200px; height:100px; background:red; border-radius:200px/100px;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*上三角*/
.triangle-up{ width:0px; height:0px; border-left:50px solid transparent;
 border-right:50px solid transparent; border-bottom:100px solid red;}

  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------

 

/*下三角*/
.triangle-down{ width:0px; height:0px; border-left:50px solid transparent;
 border-right:50px solid transparent; border-top:100px solid red;}

  效果图：

-------------------------------------------------------------------------------------------------------------------------------------

 

/*左三角*/
.triangle-left{ width:0px; height:0px; border-top:50px solid transparent;
 border-right:100px solid red; border-bottom:50px solid transparent;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*右三角*/
.triangle-right{ width:0px; height:0px; border-top:50px solid transparent;
 border-left:100px solid red; border-bottom:50px solid transparent;}

  效果图：

------------------------------------------------------------------------------------------------------------------------------------

 

/*左上三角*/
.triangle-topleft{ width:0px; height:0px; border-top:100px solid red;
 border-right:100px solid transparent;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*右上三角*/
.triangle-topright{ width:0px; height:0px; border-top:100px solid red;
 border-left:100px solid transparent;}

  效果图：

------------------------------------------------------------------------------------------------------------------------------------

 

/*左下三角*/
.triangle-bottomleft{ width:0px; height:0px; border-bottom:100px solid red;
 border-right: 100px solid transparent;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*右下三角*/
.triangle-bottomright{ width:0px; height:0px; border-bottom:100px solid red;
 border-left: 100px solid transparent;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*平行四边形*/
.parallelogram{  width:150px; height:100px; margin-left:20px; -webkit-transform:
 skew(20deg); -moz-transform:skew(20deg); -moz-transform:skew(20deg); -o-transform:
 skew(20deg); background:red;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*梯形*/
.trapezoid{  border-bottom: 100px solid red; border-left:50px solid transparent;
 border-right:50px solid transparent; height:0px; width:100px;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*六角形*/
.star-six{ width:0px; height:0px; border-left:50px solid transparent;
 border-right:50px solid transparent; border-bottom: 100px solid red;
 position: relative; }
.star-six:after { width:0px; height:0px; border-left:50px solid transparent;
 border-right:50px solid transparent; border-top:100px solid red; position:absolute;
 content: ""; top: 30px; left: -50px;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*五角星*/
.star-five{  margin:50px 0px; position:relative; display:block; color:red; width:0px;
  height: 0px; border-right:100px solid transparent; border-bottom:70px  solid red;
 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 red; border-left:30px solid transparent; 
 border-right:30px solid transparent; position:absolute; height:0px; width:0px; 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:red; top:3px; left: -105px; 
 width:0px; height:0px; border-right:100px solid transparent; border-bottom: 70px solid red;
 border-left:100px solid transparent; -webkit-transform:rotate(-70deg); -moz-transform:
 rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);content: ''; }

  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------

 

/*五角大楼*/
.pentagon{ position:relative; width:54px; border-width:50px 18px 0px;border-style:solid; 
 border-color:red transparent; } 
.pentagon:before { content: ""; position:absolute; height:0px; width:0px; top: -85px; left:
 -18px; border-width:0px 45px 35px; border-style:solid; border-color:transparent transparent
 red;}

  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------

 

/*六边形*/
.hexagon{ width:100px; height:55px; background:red; position:relative; } 
.hexagon:before {  content:""; position:absolute; top:-25px; left:0px; width:0px;
 height:0px; border-left:50px solid transparent; border-right:50px solid transparent;
 border-bottom: 25px solid red; }
.hexagon:after {  content:""; position:absolute; bottom:-25px; left:0px; width: 0px;
 height:0px; border-left:50px solid transparent; border-right:50px solid transparent;
 border-top:25px solid red;}

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*八角形*/
.octagon { width:100px; height:100px; background:red; position:relative; }   
.octagon:before {  content:""; position:absolute; top:0px; left:0px; border-bottom:
 29px solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px;
 height:0px; }  
.octagon:after { content:""; position:absolute; bottom:0px; left:0px; border-top: 29px
 solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px;
 height:0px; }

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*爱心*/
.heart { position:relative; width:100px; height:90px; } 
.heart:before, .heart:after { position:absolute; content:""; left:50px; top:0px;
 width:50px;height:80px; background:red; -moz-border-radius:50px 50px 0px 0px;
 border-radius: 50px 50px 0px 0px; -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%; }
  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------

 

 

/*无穷大符号*/
.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 red; -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); }
  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------
/*鸡蛋*/  
.egg { display:block; width:126px; height:180px; background-color:red;
 -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;  border-radius:
 50% 50% 50%  50%  / 60%   60%   40%  40%; }
  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------
/*食逗人（Pac-Man）*/
.pacman { width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid
 red; border-left:60px solid red; border-bottom:60px solid red; border-top-left-radius:60px;
 border-top-right-radius:60px; border-bottom-left-radius:60px;border-bottom-right-radius:
 60px; }
  效果图：


 -----------------------------------------------------------------------------------------------------------------------------------

 

/*提示对话框*/
.talkbubble { width:120px; height:80px; background:red; 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 red; border-bottom:13px solid 
 transparent; }

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*12角星*/
.burst-12 { background:red; 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: red; } 
.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); }

  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------

 

/*8角星*/
.burst-8 { background:red; 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:red; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg);
 -ms-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); }

  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------

 

/*钻石*/
.cut-diamond { border-style:solid; border-color:transparent transparent red transparent; 
 border-width:0 25px 25px 25px; height:0; width:50px; position:relative; margin: 20px 0
 50px 0; }
.cut-diamond:after { content:""; position:absolute; top:25px; left:-25px; width: 0; height: 
 0; border-style: solid; border-color: red transparent transparent transparent;
 border-width: 70px 50px 0 50px; }

  效果图：

 -----------------------------------------------------------------------------------------------------------------------------------

 

/*阴阳八卦*/
.yin-yang { width:96px; height:48px; background:#eee; border-color:red; 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 red; border-radius:100%; width:12px; height:12px; }   
.yin-yang:after { content:""; position:absolute; top:50%; left:50%; background:red;
 border:18px solid #eee; border-radius:100%; width:12px;height: 12px; }

  效果图：

 ------------------------------------------------------------------------------------------------------------------------------------

  • 大小: 455 Bytes
  • 大小: 1.3 KB
  • 大小: 2 KB
  • 大小: 984 Bytes
  • 大小: 975 Bytes
  • 大小: 734 Bytes
  • 大小: 743 Bytes
  • 大小: 637 Bytes
  • 大小: 679 Bytes
  • 大小: 688 Bytes
  • 大小: 660 Bytes
  • 大小: 1.2 KB
  • 大小: 1 KB
  • 大小: 1.3 KB
  • 大小: 3.1 KB
  • 大小: 1.1 KB
  • 大小: 707 Bytes
  • 大小: 815 Bytes
  • 大小: 1.4 KB
  • 大小: 3.6 KB
  • 大小: 2.9 KB
  • 大小: 1.9 KB
  • 大小: 901 Bytes
  • 大小: 1.8 KB
  • 大小: 2.5 KB
  • 大小: 1 KB
  • 大小: 3.8 KB
分享到：
| 初识JDBC
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3 画基本图形，圆形、椭圆形、三角形等

    主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下

    纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形

    css3-graphics:基于 CSS3 的图形

    该项目包含 1,000 多个基于 CSS3 的图形代码示例（想想“色板”），包括线性渐变、径向渐变、框阴影、变换、反射、2D/3D 效果和 2D/3D 动画。 令人惊讶的是，这些代码示例创建的视觉效果只需要 CSS 的基本特性和 CSS...

    CSS实例：用CSS制作网页像素画

    在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看其结构比较简单，就拿它开刀吧！ 在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看...

    基于html+css+js实现的共享视频静态网站（含报告）

    用图形化方式，展示使用模拟数据的投票结果，使用javaScript和CSS简单动画数据展示功能。 3.涉及的内容或知识点 HTML基础知识；CSS选择器、文字效果、表单、图片展示、表格、布局；JavaScript代码编写，包括基本语法...

    HTML5 Canvas核心技术 图形、动画与游戏开发

    326 7.6　总结 332 第8章　碰撞检测 333 8.1　外接图形判别法 333 8.1.1　外接矩形判别法 333 8.1.2　外接圆判别法 334 8.2　碰到墙壁即被弹回的小球 336 8.3　光线投射法 337 8.4　分离轴定理（sat）与最小平移向量...

    csstdg4figs:用于创建“ CSS”图形的基本文件

    （因此：如果图形是不是在浏览器中创建的图，或者文件丢失，或者被认为在浏览器设置中没有用，则将列出该图形，但未链接该图形。） 第17章和第18章（“过渡”和“动画”）有一些额外的示例，这些示例与书中的图形

    html5 canvas实现的绘图工具自由绘制图形画板源码.zip

    这是一款基于html5 canvas实现的绘图工具自由绘制图形画板源码，具备画板基本的线、矩形、铅笔、圆、五角星等绘图工具，及颜色与边框的填充，橡皮擦等功能。绘图完毕还具有保存图片的功能。是一款非常实用的经典...

    css-for-fun:有趣的css实践

    CSS，超越排版的艺术 ...可以看到，基本是通过“堆叠” background-image，这个属性有两个我们能用上的特性： 在CSS3中支持multiple background image，最靠前的图像越在上层。 可以设置渐变图形。 如果通过堆叠很

    元图地图开放平台技术白皮书(基于cad图形的地图平台)

    用户无需具备AutoCAD图形处理的相关专业知 识，只需熟悉web开发技术如html,js,css，即可开发基于CAD图形的专业应用。 3、可以将互联网地图与AutoCAD图形叠加，实现诸如井上下对照、行政区划图与工程图纸之间的无缝...

    元图地图开放平台开发指南(首款基于CAD图形的地图平台)

    用户无需具备AutoCAD图形处理的相关专业知 识，只需熟悉web开发技术如html,js,css，即可开发基于CAD图形的专业应用。 3、可以将互联网地图与AutoCAD图形叠加，实现诸如井上下对照、行政区划图与工程图纸之间的无缝...

    用 HTML、CSS 和 JS 编写的 简单冒险游戏_JavaScript_代码_下载

    CSS 负责图形，​​JS 负责所有其余部分（DOM 动画、交互、保存游戏状态）。由于我有一些开发和设计网站的经验，因此我认为 HTML 将是开始的正确技术。 更多详情、使用方法，请下载后阅读README.md文件

    基于python+flask构建的大型区块链论坛项目，前端html+css+bootstrap框架+js+jq+ajax

    python3+flask框架，前端html+css+bootstrap框架+js+jq+ajax,前端弹窗用的是sweetalert2，注册界面短信验证码调用的是阿里大鱼短信接口，图形验证码是用 python中PIL图形处理工具画的，验证码缓存是用的memcache,用...

    SVG精髓第二版中英文对照

    本书还为经验丰富的设计师准备了6个附录，解释了XML标记和CSS样式等基本概念，因此即使你没有网页设计的经验，也可以开始学习SVG。 通过阅读本书，你将能够： 为网页创建高质量、高分辨率的图形； 创建通过搜索引擎...

    CSS3 3D酷炫立方体变换动画的实现

    主要用到关键帧来使3D图形运动起来，涉及到了一些抽象的思想，立体的想象。 先给大家看看完成的效果，代码也不是很难，每行代码都给到了详细注释，纯CSS，没有用到JS，CSS3不错。 效果如下: 每一行基本都有注释，就...

Magicbox
Global site tag (gtag.js) - Google Analytics