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

随机推荐

【解题报告】洛谷 P3492 [POI2009]TAB-Arrays
[解题报告] 洛谷 P3492 [POI2009]TAB-Arrays 这题是我随机跳题的时候跳到的.写完这道题之后,顺便看了一下题解,发现只有一篇题解,所以就在这里顺便写一个解题报告了. 首先当然是 ...
enote笔记语言（2）（ver0.2）
why not(whyn't) 为什么不(与“why”相对应,是它的反面) how对策 how设计 key-memo ...
Nginx反向代理WebSocket（WSS）
1. WebSocket协议 WebSocket 协议提供了一种创建支持客户端和服务端实时双向通信Web应用程序的方法.作为HTML5规范的一部分,WebSockets简化了开发Web实时通信程序的难 ...
C++数组查重
今天课上实验课,遇到一道题目,需要查找一个数组中出现次数最多的元素和次数,并且输出.第一次用struct模拟字典,十分麻烦而且复杂度是O(n*n).其实,运用转化的思想,可以先将其排序,然后再查找即可 ...
jquery 插件封装模板
//插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...
[bzoj2502]清理雪道[上下界网络流]
bzoj状态里有两种,一种时间是个位数,一种是四位数,我就是四位数的那种,,,估计都是看了hzwer.. #include <bits/stdc++.h> #define INF 0x3f ...
mongodb之存储引擎
前言存储引擎是Mongodb管理数据存储主要的组件,Mongodb支持多种存储引擎,每种存储引擎适合特定的场景 WiredTiger 特性 1. version >= 3.2版本默认存储引擎2 ...
linux系统读写缓存
1. 操作系统缓存在linux世界里,一切可读写设备都可看作是文件.文件cache设计的好坏直接影响着文件系统和磁盘的性能.最直观的是使用free命令看到的cached列. 这里面的cached列 ...
hiho challenge 15 C题
DP题.状态很容易设,dp[u][0]表示u点子树解决,dp[u][1]表示剩一条链,dp[u][2]表示邻边全炸. 转移有点难,看代码解释: #include <iostream> #i ...
Codeforces Round #305 (Div. 2) E题（数论+容斥原理）
E. Mike and Foam time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

CSS画各种二维图形

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

随机推荐

热门专题