CSS画各种二维图形

1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <style type="text/css">

        #triangle_top{

            display: inline-block;

            width:0;

            height:0;

            border-left:50px solid transparent;

            border-right: 50px solid transparent;

            border-bottom:100px solid blue;

        }

        #triangle_bottom{

            display: inline-block;

            width:0;

            height:0;

            border-left:50px solid transparent;

            border-right:50px solid transparent;

            border-top:100px solid blue;

        }

        #triangle_left{

            display: inline-block;

            width:0;

            height:0;

            border-bottom:50px solid transparent;

            border-top:50px solid transparent;

            border-right:100px solid blue;

        }

        #triangle_right{

            display: inline-block;

            width:0;

            height:0;

            border-bottom:50px solid transparent;

            border-top:50px solid transparent;

            border-left:100px solid blue;

        }

        #right_triangle_top_left{

            display: inline-block;

            width:0;

            height:0;

            border-right:100px solid transparent;

            border-top:100px solid blue;

        }

        #right_triangle_top_right{

            display: inline-block;

            width:0;

            height:0;

            border-left:100px solid transparent;

            border-top:100px solid blue;

        }

        #right_triangle_bottom_left{

            display:inline-block;

            width:0;

            height:0;

            border-right:100px solid transparent;

            border-bottom:100px solid blue;

        }

        #right_triangle_bottom_right{

            display: inline-block;

            width:0;

            height:0;

            border-left:100px solid transparent;

            border-bottom:100px solid blue;

        }

        #circle{

            display: inline-block;

            width: 100px;

            height: 100px;

            background: blue;

            -webkit-border-radius: 50px;

            -moz-border-radius: 50px;

            border-radius: 50px;

        }

        #oval{

            display: inline-block;

            width:100px;

            height:50px;

            background-color: blue;

            -webkit-border-radius:50px/25px;

            -moz-border-radius:50px/25px;

            border-radius:50px/25px;

        }

        #trapezium{

            display: inline-block;

            height: 0;

            width: 100px;

            border-bottom: 100px solid blue;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

        }

        #parallelogram{

            display: inline-block;

            height: 100px;

            width: 100px;

            background-color: blue;

            -webkit-transform: skewX(30deg);

            -moz-transform: skewX(30deg);

            -ms-transform: skewX(30deg);

            -o-transform: skewX(30deg);

            transform: skewX(30deg);

            transform-origin: 0 0;

        }

        #star {

            width: 0;

            height: 0;

            display: inline-block;

            border-right: 100px solid transparent;

            border-left: 100px solid transparent;

            border-bottom: 70px solid red;

            -moz-transform: rotate(35deg);

            -webkit-transform: rotate(35deg);

            -ms-transform: rotate(35deg);

            -o-transform: rotate(35deg);

            transform-origin: 80px 120px;

        }

        #star:before {

            content: '';

            height: 0;

            width: 0;

            display: inline-block;

            position: relative;

            top: -45px;

            left: -65px;

            border-left: 30px solid transparent;

            border-right: 30px solid transparent;

            border-bottom: 80px solid red;

            -webkit-transform: rotate(-35deg);

            -moz-transform: rotate(-35deg);

            -ms-transform: rotate(-35deg);

            -o-transform: rotate(-35deg);

            transform: rotate(-35deg);

        }

        #star:after{

            content: '';

            height:0;

            width:0;

            display: inline-block;

            position: relative;

            top: -78px;

            left: -105px;

            border-right: 100px solid transparent;

            border-left: 100px solid transparent;

            border-bottom: 70px solid red;

            -webkit-transform: rotate(-70deg);

            -moz-transform: rotate(-70deg);

            -ms-transform: rotate(-70deg);

            -o-transform: rotate(-70deg);

            transform: rotate(-70deg);

        }

        #star_six_points {

            width: 0;

            height: 0;

            position: relative;

            top: -50px;

            left: 50px;

            display: inline-block;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-bottom: 100px solid red;

        }

        #star_six_points:after{

            content: '';

            width:0;

            height:0;

            display: inline-block;

            position: absolute;

            top:35px;

            left:-50px;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-top: 100px solid red;

        }

        #hexagon{

            width:100px;

            height:50px;

            display: inline-block;

            position: relative;

            left: 80px;

            top: -50px;

            background-color: red;

        }

        #hexagon:before{

            content: '';

            width:0;

            height:0;

            display: inline-block;

            position: absolute;

            top: -25px;

            left: 0;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-bottom: 25px solid red;

        }

        #hexagon:after{

            content: '';

            width:0;

            height:0;

            display: inline-block;

            position: absolute;

            top: 50px;

            left: 0;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-top: 25px solid red;

        }

        #heart {

            top:-120px;

            left: 120px;

            position: relative;

            display: inline-block;

        }

        #heart:before,#heart:after {

            content: "";

            width: 70px;

            height: 115px;

            position: absolute;

            background: red;

            display: inline-block;

            -webkit-border-radius: 50px 50px 0 0;

            -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);

        }

        #heart:after {

            left: 32px;

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -ms-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            transform: rotate(45deg);

        }

        #egg{

            width: 136px;

            height: 190px;

            position: relative;

            left: 260px;

            background: #ffc000;

            display: inline-block;

            -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;

            -moz-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;

            border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;

        }

        #infinity{

            width: 220px;

            height: 100px;

            position: relative;

            display: inline-block;

            left: 280px;

        }

        #infinity:before,#infinity:after {

            content: "";

            width: 60px;

            height: 60px;

            position: absolute;

            top: 0;

            left: 0;

            border: 20px solid #06c999;

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

</head>

<body>

<div id="triangle_top"></div>

<div id="triangle_bottom"></div>

<div id="triangle_left"></div>

<div id="triangle_right"></div>

<div id="right_triangle_top_left"></div>

<div id="right_triangle_top_right"></div>

<div id="right_triangle_bottom_left"></div>

<div id="right_triangle_bottom_right"></div>

<div id="circle"></div>

<div id="oval"></div>

<div id="trapezium"></div>

<div id="parallelogram"></div>

<div id="star"></div>

<div id="star_six_points"></div>

<div id="hexagon"></div>

<div id="heart"></div>

<div id="egg"></div>

<div id="infinity"></div>

</body>

</html>

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

matlab绘制二维图形
常用的二维图形命令: plot:绘制二维图形 loglog:用全对数坐标绘图 semilogx:用半对数坐标(X)绘图 semilogy:用半对数坐标(Y)绘图 fill:绘制二维多边填充图形 pol ...
VS2008集成QT的OpenGL开发（实现二维图形的旋转）
主要是利用Qt中的定时器实现了二维图形的旋转功能: #ifndef QGLTEST_H #define QGLTEST_H #include <QGLWidget> #include &l ...
通过Matrix进行二维图形仿射变换
Affine Transformation是一种二维坐标到二维坐标之间的线性变换,保持二维图形的"平直性"和"平行性".仿射变换可以通过一系列的原子变换的复合来 ...
二维图形的矩阵变换（三）——在WPF中的应用矩阵变换
原文:二维图形的矩阵变换(三)--在WPF中的应用矩阵变换 UIElement和RenderTransform 首先,我们来看看什么样的对象可以进行变换.在WPF中,用于呈现给用户的对象的基类为Vis ...
二维图形的矩阵变换（二）——WPF中的矩阵变换基础
原文:二维图形的矩阵变换(二)--WPF中的矩阵变换基础在前文二维图形的矩阵变换(一)——基本概念中已经介绍过二维图像矩阵变换的一些基础知识,本文中主要介绍一下如何在WPF中进行矩阵变换. Matr ...
3ds max学习笔记（十五）-- 二维图形的操作
(二维图形的创建) 1,在命令面板的[新建],单击第二个按钮: 从中选择对象名称,在视图种单击拖动进行创建,特殊:线:摁[shift]限制水平,垂直方向: 2,二维对象参数: 在渲染中启用:显示二维线 ...
openGL实现二维图形和三维图形
openGL是一个强大的底层图形库,其命令最初的时候使用C语言实现的.openGL定义了一个图形程序接口,常用于制作处理三维图像,功能强大,调用方便,在图像处理十分受欢迎. 实现图形主要使用的是ope ...
QT 二维图形原理、发展及应用
转载自网易博客:sun的博客 http://zhouyang340.blog.163.com/blog/static/3024095920126710504178/ 2D绘图 Qt4中的2D绘图部分 ...
Matlab 常用绘图指令（二维图形）
使用matlab的时候常常会忘掉一些指令,每次都要重新查找,挺麻烦的,这里收集一些常用的绘图指令,供自己和大家以后方便查找和使用. 1.例子-包含了常用绘图命令 clear clc %%数据准备 x ...

随机推荐

python利用7z批量解压rar
一开始我使用了rarfile这个库,奈何对于含有密码的压缩包支持不好,在linux上不抛出异常:之后有又尝试了unrar..比rarfile还费劲.. 所以用了调用系统命令的方法,用7z来解压通过a ...
enote笔记语言（5）——其他
章节:其他 ((主:单词)) 用来醒目地强调这个句子中哪个词语作主语 sentence: ...
Django REST framework 分页
三种分页:根据页码.根据索引.根据加密 http://www.xx.com/courses/?page=1&size=10 http://www.xx.com/courses/?offset= ...
[cf 599C] Day at the Beach
题意:有n个数,将其分组使整个数列排序后每组中的数仍在该组中,求最多的分组数. 代码很易懂 #include <iostream> #include <algorithm> # ...
基于zookeeper和强一致性复制实现MySQL分布式数据库集群
http://qikan.cqvip.com/article/detail.aspx?id=667750898&from=zk_search
JDBC数据源(DataSource)数据源技术是Java操作数据库的一个很关键技术，流行的持久化框架都离不开数据源的应用。
JDBC数据源(DataSource)的简单实现数据源技术是Java操作数据库的一个很关键技术,流行的持久化框架都离不开数据源的应用. 2.数据源提供了一种简单获取数据库连接的方式,并能在内部通 ...
MVC.Net：对MVC5部署时出现403.14错误的解决方法
当我们部署MVC5到IIS 7的时候,有时会出现403.14的错误,如下图: 对于这个错误的解决方法就是在应用程序的web.config的system.webServer节点中加入这一句: <m ...
027依据前序遍历和中序遍历，重建二叉树(keep it up)
剑指offer中题目:http://ac.jobdu.com/problem.php?pid=1385 题目描写叙述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.如果输入的前序遍历和中 ...
读写锁(read-write lock)机制-----多线程同步问题的解决
原文: http://blog.chinaunix.net/uid-27177626-id-3791049.html ----------------------------------------- ...
maven出现不再支持源选项 1.5。请使用 1.6 或更高版本
maven出现不再支持源选项 1.5.请使用 1.6 或更高版本学习了:http://blog.csdn.net/sosous/article/details/78312867 错误: [ERROR ...

CSS画各种二维图形

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

随机推荐

热门专题