1.效果

2.源码

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <style type="text/css">
  5.         #triangle_top{
  6.             display: inline-block;
  7.             width:0;
  8.             height:0;
  9.             border-left:50px solid transparent;
  10.             border-right: 50px solid transparent;
  11.             border-bottom:100px solid blue;
  12.         }
  13.         #triangle_bottom{
  14.             display: inline-block;
  15.             width:0;
  16.             height:0;
  17.             border-left:50px solid transparent;
  18.             border-right:50px solid transparent;
  19.             border-top:100px solid blue;
  20.         }
  21.         #triangle_left{
  22.             display: inline-block;
  23.             width:0;
  24.             height:0;
  25.             border-bottom:50px solid transparent;
  26.             border-top:50px solid transparent;
  27.             border-right:100px solid blue;
  28.         }
  29.         #triangle_right{
  30.             display: inline-block;
  31.             width:0;
  32.             height:0;
  33.             border-bottom:50px solid transparent;
  34.             border-top:50px solid transparent;
  35.             border-left:100px solid blue;
  36.         }
  37.         #right_triangle_top_left{
  38.             display: inline-block;
  39.             width:0;
  40.             height:0;
  41.             border-right:100px solid transparent;
  42.             border-top:100px solid blue;
  43.         }
  44.         #right_triangle_top_right{
  45.             display: inline-block;
  46.             width:0;
  47.             height:0;
  48.             border-left:100px solid transparent;
  49.             border-top:100px solid blue;
  50.         }
  51.         #right_triangle_bottom_left{
  52.             display:inline-block;
  53.             width:0;
  54.             height:0;
  55.             border-right:100px solid transparent;
  56.             border-bottom:100px solid blue;
  57.         }
  58.         #right_triangle_bottom_right{
  59.             display: inline-block;
  60.             width:0;
  61.             height:0;
  62.             border-left:100px solid transparent;
  63.             border-bottom:100px solid blue;
  64.         }
  65.         #circle{
  66.             display: inline-block;
  67.             width: 100px;
  68.             height: 100px;
  69.             background: blue;
  70.             -webkit-border-radius: 50px;
  71.             -moz-border-radius: 50px;
  72.             border-radius: 50px;
  73.         }
  74.         #oval{
  75.             display: inline-block;
  76.             width:100px;
  77.             height:50px;
  78.             background-color: blue;
  79.             -webkit-border-radius:50px/25px;
  80.             -moz-border-radius:50px/25px;
  81.             border-radius:50px/25px;
  82.         }
  83.         #trapezium{
  84.             display: inline-block;
  85.             height: 0;
  86.             width: 100px;
  87.             border-bottom: 100px solid blue;
  88.             border-left: 50px solid transparent;
  89.             border-right: 50px solid transparent;
  90.         }
  91.         #parallelogram{
  92.             display: inline-block;
  93.             height: 100px;
  94.             width: 100px;
  95.             background-color: blue;
  96.             -webkit-transform: skewX(30deg);
  97.             -moz-transform: skewX(30deg);
  98.             -ms-transform: skewX(30deg);
  99.             -o-transform: skewX(30deg);
  100.             transform: skewX(30deg);
  101.             transform-origin: 0 0;
  102.         }
  103.         #star {
  104.             width: 0;
  105.             height: 0;
  106.             display: inline-block;
  107.             border-right: 100px solid transparent;
  108.             border-left: 100px solid transparent;
  109.             border-bottom: 70px solid red;
  110.             -moz-transform: rotate(35deg);
  111.             -webkit-transform: rotate(35deg);
  112.             -ms-transform: rotate(35deg);
  113.             -o-transform: rotate(35deg);
  114.             transform-origin: 80px 120px;
  115.         }
  116.         #star:before {
  117.             content: '';
  118.             height: 0;
  119.             width: 0;
  120.             display: inline-block;
  121.             position: relative;
  122.             top: -45px;
  123.             left: -65px;
  124.             border-left: 30px solid transparent;
  125.             border-right: 30px solid transparent;
  126.             border-bottom: 80px solid red;
  127.             -webkit-transform: rotate(-35deg);
  128.             -moz-transform: rotate(-35deg);
  129.             -ms-transform: rotate(-35deg);
  130.             -o-transform: rotate(-35deg);
  131.             transform: rotate(-35deg);
  132.         }
  133.         #star:after{
  134.             content: '';
  135.             height:0;
  136.             width:0;
  137.             display: inline-block;
  138.             position: relative;
  139.             top: -78px;
  140.             left: -105px;
  141.             border-right: 100px solid transparent;
  142.             border-left: 100px solid transparent;
  143.             border-bottom: 70px solid red;
  144.             -webkit-transform: rotate(-70deg);
  145.             -moz-transform: rotate(-70deg);
  146.             -ms-transform: rotate(-70deg);
  147.             -o-transform: rotate(-70deg);
  148.             transform: rotate(-70deg);
  149.         }
  150.         #star_six_points {
  151.             width: 0;
  152.             height: 0;
  153.             position: relative;
  154.             top: -50px;
  155.             left: 50px;
  156.             display: inline-block;
  157.             border-left: 50px solid transparent;
  158.             border-right: 50px solid transparent;
  159.             border-bottom: 100px solid red;
  160.         }
  161.         #star_six_points:after{
  162.             content: '';
  163.             width:0;
  164.             height:0;
  165.             display: inline-block;
  166.             position: absolute;
  167.             top:35px;
  168.             left:-50px;
  169.             border-left: 50px solid transparent;
  170.             border-right: 50px solid transparent;
  171.             border-top: 100px solid red;
  172.         }
  173.         #hexagon{
  174.             width:100px;
  175.             height:50px;
  176.             display: inline-block;
  177.             position: relative;
  178.             left: 80px;
  179.             top: -50px;
  180.             background-color: red;
  181.         }
  182.         #hexagon:before{
  183.             content: '';
  184.             width:0;
  185.             height:0;
  186.             display: inline-block;
  187.             position: absolute;
  188.             top: -25px;
  189.             left: 0;
  190.             border-left: 50px solid transparent;
  191.             border-right: 50px solid transparent;
  192.             border-bottom: 25px solid red;
  193.         }
  194.         #hexagon:after{
  195.             content: '';
  196.             width:0;
  197.             height:0;
  198.             display: inline-block;
  199.             position: absolute;
  200.             top: 50px;
  201.             left: 0;
  202.             border-left: 50px solid transparent;
  203.             border-right: 50px solid transparent;
  204.             border-top: 25px solid red;
  205.         }
  206.         #heart {
  207.             top:-120px;
  208.             left: 120px;
  209.             position: relative;
  210.             display: inline-block;
  211.         }
  212.         #heart:before,#heart:after {
  213.             content: "";
  214.             width: 70px;
  215.             height: 115px;
  216.             position: absolute;
  217.             background: red;
  218.             display: inline-block;
  219.             -webkit-border-radius: 50px 50px 0 0;
  220.             -moz-border-radius: 50px 50px 0 0;
  221.             border-radius: 50px 50px 0 0;
  222.             -webkit-transform: rotate(-45deg);
  223.             -moz-transform: rotate(-45deg);
  224.             -ms-transform: rotate(-45deg);
  225.             -o-transform: rotate(-45deg);
  226.             transform: rotate(-45deg);
  227.         }
  228.         #heart:after {
  229.             left: 32px;
  230.             -webkit-transform: rotate(45deg);
  231.             -moz-transform: rotate(45deg);
  232.             -ms-transform: rotate(45deg);
  233.             -o-transform: rotate(45deg);
  234.             transform: rotate(45deg);
  235.         }
  236.         #egg{
  237.             width: 136px;
  238.             height: 190px;
  239.             position: relative;
  240.             left: 260px;
  241.             background: #ffc000;
  242.             display: inline-block;
  243.             -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
  244.             -moz-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
  245.             border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
  246.         }
  247.         #infinity{
  248.             width: 220px;
  249.             height: 100px;
  250.             position: relative;
  251.             display: inline-block;
  252.             left: 280px;
  253.         }
  254.         #infinity:before,#infinity:after {
  255.             content: "";
  256.             width: 60px;
  257.             height: 60px;
  258.             position: absolute;
  259.             top: 0;
  260.             left: 0;
  261.             border: 20px solid #06c999;
  262.             -moz-border-radius: 50px 50px 0 50px;
  263.             border-radius: 50px 50px 0 50px;
  264.             -webkit-transform: rotate(-45deg);
  265.             -moz-transform: rotate(-45deg);
  266.             -ms-transform: rotate(-45deg);
  267.             -o-transform: rotate(-45deg);
  268.             transform: rotate(-45deg);
  269.         }
  270.         #infinity:after {
  271.             left: auto;
  272.             right: 0;
  273.             -moz-border-radius: 50px 50px 50px 0;
  274.             border-radius: 50px 50px 50px 0;
  275.             -webkit-transform: rotate(45deg);
  276.             -moz-transform: rotate(45deg);
  277.             -ms-transform: rotate(45deg);
  278.             -o-transform: rotate(45deg);
  279.             transform: rotate(45deg);
  280.         }
  281.     </style>
  282. </head>
  283. <body>
  284. <div id="triangle_top"></div>
  285. <div id="triangle_bottom"></div>
  286. <div id="triangle_left"></div>
  287. <div id="triangle_right"></div>
  288. <div id="right_triangle_top_left"></div>
  289. <div id="right_triangle_top_right"></div>
  290. <div id="right_triangle_bottom_left"></div>
  291. <div id="right_triangle_bottom_right"></div>
  292. <div id="circle"></div>
  293. <div id="oval"></div>
  294. <div id="trapezium"></div>
  295. <div id="parallelogram"></div>
  296. <div id="star"></div>
  297. <div id="star_six_points"></div>
  298. <div id="hexagon"></div>
  299. <div id="heart"></div>
  300. <div id="egg"></div>
  301. <div id="infinity"></div>
  302. </body>
  303. </html>

CSS画各种二维图形的更多相关文章

  1. matlab绘制二维图形

    常用的二维图形命令: plot:绘制二维图形 loglog:用全对数坐标绘图 semilogx:用半对数坐标(X)绘图 semilogy:用半对数坐标(Y)绘图 fill:绘制二维多边填充图形 pol ...

  2. VS2008集成QT的OpenGL开发（实现二维图形的旋转）

    主要是利用Qt中的定时器实现了二维图形的旋转功能: #ifndef QGLTEST_H #define QGLTEST_H #include <QGLWidget> #include &l ...

  3. 通过Matrix进行二维图形仿射变换

    Affine Transformation是一种二维坐标到二维坐标之间的线性变换,保持二维图形的"平直性"和"平行性".仿射变换可以通过一系列的原子变换的复合来 ...

  4. 二维图形的矩阵变换（三）——在WPF中的应用矩阵变换

    原文:二维图形的矩阵变换(三)--在WPF中的应用矩阵变换 UIElement和RenderTransform 首先,我们来看看什么样的对象可以进行变换.在WPF中,用于呈现给用户的对象的基类为Vis ...

  5. 二维图形的矩阵变换（二）——WPF中的矩阵变换基础

    原文:二维图形的矩阵变换(二)--WPF中的矩阵变换基础 在前文二维图形的矩阵变换(一)——基本概念中已经介绍过二维图像矩阵变换的一些基础知识,本文中主要介绍一下如何在WPF中进行矩阵变换. Matr ...

  6. 3ds max学习笔记（十五）-- 二维图形的操作

    (二维图形的创建) 1,在命令面板的[新建],单击第二个按钮: 从中选择对象名称,在视图种单击拖动进行创建,特殊:线:摁[shift]限制水平,垂直方向: 2,二维对象参数: 在渲染中启用:显示二维线 ...

  7. openGL实现二维图形和三维图形

    openGL是一个强大的底层图形库,其命令最初的时候使用C语言实现的.openGL定义了一个图形程序接口,常用于制作处理三维图像,功能强大,调用方便,在图像处理十分受欢迎. 实现图形主要使用的是ope ...

  8. QT 二维图形 原理、发展及应用

    转载自 网易博客:sun的博客 http://zhouyang340.blog.163.com/blog/static/3024095920126710504178/ 2D绘图 Qt4中的2D绘图部分 ...

  9. Matlab 常用绘图指令（二维图形）

    使用matlab的时候常常会忘掉一些指令,每次都要重新查找,挺麻烦的,这里收集一些常用的绘图指令,供自己和大家以后方便查找和使用. 1.例子-包含了常用绘图命令 clear clc %%数据准备 x ...

随机推荐

  1. 25.TF&IDF算法以及向量空间模型算法

    主要知识点: boolean model IF/IDF vector space model     一.boolean model     在es做各种搜索进行打分排序时,会先用boolean mo ...

  2. 基本数据类型：字符串（str）

    一.字符串的定义和创建 字符串是一个有序的字符的集合,用于存储和表示基本的文本信息,' '或'' ''或''' '''中间包含的内容称之为字符串,总之加了引号的字符都被认为是字符串! 创建: > ...

  3. 一个手机图表(echarts)折线图的封装

    //定义一组颜色值,按顺序取出 var colorGroup = ["#6ca3c4","#76bfa3","#ea8f7a"," ...

  4. Workflow：实现一个简单的审批流程

    1. 创建一个空白的项目,在其中创建Host – Windows Console Application,Client – Windows forms Application和DataExchange ...

  5. linux中shell命令test用法和举例

    shell test命令 和 [ 是同一个命令的不同名称. 原文:http://www.cnblogs.com/Jeff-Tang/p/5776947.html ------------------- ...

  6. Win10中如何把语言栏缩到系统托盘

    Win10中如何把语言栏缩到系统托盘 原来语言栏是在系统托盘中的,右键点击,然后选择“显示语言栏”,就不能缩回去了: 后来在“控制面板\时钟.语言和区域\语言\高级设置”里面,有一个选项: “使用桌面 ...

  7. UVa 642 - Word Amalgamation

    题目:给你一个单词列表.再给你一些新的单词.输出列表中又一次排列能得到此新单词的词. 分析:字符串.对每一个字符串的字母排序生成新的传f(str).总体排序,用二分来查找就可以. 说明:注意输出要满足 ...

  8. 美团网 KVM虚拟化公开课学习笔记

    KVM优化技术,美团开放平台--邱剑 基于KVM现有选项做一些优化.视频地址:http://www.osforce.cn/course/77/learn#lesson/80 CPU调优: 1.Cont ...

  9. iOS 运行时添加属性和方法

    第一种:runtime.h里的方法 BOOL class_addProperty(Class cls, const char *name, const objc_property_attribute_ ...

  10. iOS7系统iLEX RAT冬青鼠安装教程：无需刷机还原纯净越狱系统

    全网科技 温馨提醒:iLEX RAT和Semi-Restore的作用都是让你的已越狱的设备恢复至越狱的初始状态. 可是要注意无论你是用iLexRAT冬青鼠还是Semi-restore.对于还原来说都存 ...