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

随机推荐

通过JS唤醒app（安卓+ios）
有需求说要通过页面按钮唤醒app,或者手机上没有这款app跳转到商店,然后刚开始也是查了资料的,结果发现一头雾水,不过最后还是捣鼓出来了,当然也参考了前人分享的经验,下面我就将方法整理一下: 首先明确 ...
C++关键字：重学记录
const_cast dynamic_cast explicit
git 删除某次指定的提交
reset命令有3种方式: 1:git reset –mixed:此为默认方式,不带任何参数的git reset,即时这种方式,它回退到某个版本,只保留源码,回退commit和index信息 2:gi ...
js 保留几位小数位数
定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.
【[Offer收割]编程练习赛14 D】剑刃风暴(半径为R的圆能够覆盖的平面上最多点数目模板)
[题目链接]:http://hihocoder.com/problemset/problem/1508 [题意] [题解] 求一个半径为R的圆能够覆盖的平面上的n个点中最多的点数; O(N2log2N ...
【hiho一下第145周】智力竞赛
[题目链接]:http://hihocoder.com/contest/hiho145/problem/1 [题意] [题解] 设f[i][j]表示做对i道题,做错j道题能够到达的最好状态是什么; 这 ...
Spring学习总结（4）——Spring AOP教程
一.概念 AOP(Aspect Oriented Programming):面向切面编程. 面向切面编程(也叫面向方面编程),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用AO ...
CSVHelper在Asp.Net MVC中的使用
1,从数据库读取数据,然后导出CSV文件 [HttpPost] public FileResult ExportCSV() { var apps =....//linq以及EF从数据库查询数据 Mem ...
hdu 2242双联通分量+树形dp
/*先求出双联通缩点,然后进行树形dp*/ #include<stdio.h> #include<string.h> #include<math.h> #defin ...
dinic算法求最大流的学习
http://trp.jlu.edu.cn/software/net/lssx/4/4.38.htm http://www.cnblogs.com/zen_chou/archive/0001/01/0 ...

CSS画各种二维图形

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

随机推荐

热门专题