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

随机推荐

Codeforces 919C - Seat Arrangements
传送门:http://codeforces.com/contest/919/problem/C 给出一张n×m的座位表(有已占座位和空座位),请选择同一行(或列)内连续的k个座位.求选择的方法数. H ...
Bitvise ssh client+ chrome +SwitchyOmega *** (xjl456852原创)
首先这个比ss还要简单,ss还需要在vps上搭建服务器.这个不需要. 但是无论是ss 还是 bitvise 都需要有一个自己的vps才行. 首先打开Bitvise ssh client程序: ...
linux修改mysql表结构
增加字段: alter table [tablename] add [字段名] [字段类型] first(首位); alter table [tablename] add [字段名] [字段类型] a ...
【Codeforces 467C】George and Job
[链接] 我是链接,点我呀:) [题意] 让你从1..n这n个数字中选出来k个不相交的长度为m的区间然后这个k个区间的和最大求出这k个区间的和的最大值 [题解] 设dp[i][j]表示前i个数字 ...
清北学堂模拟赛d4t2 b
分析:比较复杂的一题. 首先要求k个mod m互不相同且和为n的数ai,我们可以转化为求和为k个bi,并且(Σbi) % m = n % m 其中bi=ai % m,接下来可以用dp求出选了i个b,和 ...
du 和 df的不同
http://blog.sina.com.cn/s/blog_9c8286b7010108aj.html du和df命令都被用于获得文件系统大小的信息:df用于报告文件系统的总块数及剩余块数,du - ...
CI笔记
1.控制器实现自己的控制器MY_Controller是在./application/core/MY_Controller.php中. 2.类库添加自己的类是放在./application./lib ...
POJ 3304 segments 线段和直线相交
Segments Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14178 Accepted: 4521 Descrip ...
A*算法学习(转)
A*启发式搜索算法详解人工智能 1导言 1.1 算法 1.2 Dijkstra算法与最佳优先搜索 1.3 A*算法 2 启发式算法 2.1 A*对启发式函数的使用 2.2 速度还是精确度? 2.3 ...
oracle 内部机制-DTRACE
Oracle SQL Tuning and CBO Internals: Based Optimizer with CBO Internals and SQL Tuning Optimization ...

CSS画各种二维图形

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

随机推荐

热门专题