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

随机推荐

一个带关闭按钮的Div窗口，很漂亮
<html><head><title>JS+CSS实现带关闭按钮的DIV弹出窗口</title><script> function lock ...
如何在redhat 7上安装VNC服务器
平时我们基本上都是用xshell或者用putty远程我们的linux服务器,如果我们的linux服务器安装了图型化界面那我们又该如何远程使用我们的图形化界面呢?下面我们用vnc来实现远程我们的linu ...
我理解的数据结构（一）—— 数组(Array)
我理解的数据结构(一)-- 数组(Array) 首先,我是一个phper,但是毕竟php是一个脚本语言,如果使用脚本语言去理解数据结构具有一定的局限性.因为脚本语言是不需要编译的,如果你的语法写的不错 ...
【模板】Hash
洛谷3370 这题煞笔的吧QAQ......排序去重或者Map都可以 #include<cstdio> #include<map> #include<string> ...
optimizer_index_cost_adj
Oracle在选择不同的访问路径时,会对全表扫描和索引扫描进行比较评估. 在比较的时候,Oracle会把索引扫描的成本转换为全表扫描的成本,和全表扫描的COST进行比较.这个转换需要一个转换因子. 就 ...
解决ubuntu上opengl的问题
装完ubuntu之后,对于opengl的程序总是出现问题,先将解决方案列出如下: http://www.linuxforums.org/forum/ubuntu-linux/175490-graphi ...
《简明Python编程》核心笔记(1~5章)
2014年8月20日 <简明Python编程>核心笔记 (1~5章) 昨天和今天两天时间里.把<简明Python编程>这一本书学完了,包含书上的代码.现把核心笔记记录下来,以 ...
ZendFramework2学习笔记表单过滤、表单验证
ZF2有非常多内建的Filter和Validator组件,能够方便地对表单数据进行处理. Filter的作用是过滤表单数据.比如,去除一些空格,替换一些敏感词等. Validator的作用是检验表单数 ...
Office 365 的公共网站的一些限制及解决的办法
当前的SharePoint Online版本是基于SharePoint 2013的,但是很多功能确被阉割掉了. 下面主要列出Office 365公共网站被限制的功能,以及可绕过的解决方案: 内容类型 ...
前端页面a标签嵌套a标签效果的两种解决方案
这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要跳转 ...

CSS画各种二维图形

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

随机推荐

热门专题