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 ...
随机推荐
- PAT 1104 Sum of Number Segments
Given a sequence of positive numbers, a segment is defined to be a consecutive subsequence. For exam ...
- hadoop手工移块
1.关于磁盘使用策略,介绍参考http://www.it165.net/admin/html/201410/3860.html 在hadoop2.0中,datanode数据副本存放磁盘选择策略有两种方 ...
- Maven学习总结(十一)——Maven项目对象模型pom.xml文件详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- HDU - 3556 - Continued Fraction
先上题目: Continued Fraction Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Jav ...
- 20180530利用Maxwell组件实时监听Mysql的binlog日志
转自:https://blog.csdn.net/qq_30921461/article/details/78320750 http://kafka.apache.org/quickstart htt ...
- Spring MVC-控制器（Controller）-参数方法名称解析器（Parameter Method Name Resolver ）示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_parametermethodnameresolver.htm 说明:示例基于Sp ...
- 开源GIS软件 3
OpenWLANMap 与 OpenStreetMap 项目类似,OpenWLANMap 将变成一个开源的替代产品,提供 WLANs 的数据库.定位信息等. 开源排水管网GIS系统 udpnGIS 邢 ...
- getAttribute for IE7
getAttribute 大部分介绍都说仅仅有一个.包含w3cschool. 事实上这种方法在iE7下有两个參数. msdn 上查到的. 简单翻一下 0 是默认情况,不区分大写和小写! 1 区分大写和 ...
- poj 1664 放苹果 (划分数)
题意:中文题目,不解释... 题解: 第一种方法是暴力深搜:枚举盘子1~n放苹果数量的所有情况,不需要剪枝:将每次枚举的情况,即每个盘的苹果数量,以字典序排序,然后存进set里 以此去重像" ...
- mysql学习之四：sql语句学习2
创建数据库: CREATE DATABASE stefan; 删除数据库: DROP DATABASE stefan; 重命名数据库: 重命名数据库没有直接的办法. 已经不再使用的方法: RENAME ...