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 ...
随机推荐
- 浏览器 <html>相关
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> https://blog.csdn ...
- Luogu P2970 [USACO09DEC]自私的放牧
https://www.luogu.org/problemnew/show/P2970 P2970 [USACO09DEC]自私的放牧 题目描述 Each of Farmer John's N (1 ...
- 腾讯云&搭建微信小程序服务
准备域名和证书 任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书. 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可 ...
- hadoop-磁盘出现坏盘，如何能在线换盘
涉及到磁盘存储路径的配置文件参数有: hdfs-site.xml <name>dfs.datanode.data.dir</name> yarn-site.xml <na ...
- 2017 Multi-University Training Contest - Team 4 Classic Quotation
Classic Quotation Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Othe ...
- ClassCastException：ColorDrawable cannot be cast to RoundRectDrawableWithShadow
错误信息 java.lang.ClassCastException: android.graphics.drawable.ColorDrawable cannot be cast to android ...
- 数字统计(2010年NOIP全国联赛普及组)
题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 2 在数 2 中出现了 1 次,在数 12 中出现 1 次,在数 20 中出 现 1 次 ...
- Spring for Apache Kafka @KafkaListener使用及注意事项
官方文档: https://docs.spring.io/spring-kafka/reference/html/ @KafkaListener The @KafkaListener annota ...
- iOS：改变UITableViewCell的选中背景色
要改变UITableViewCell选中时的背景色,需要在-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtInde ...
- .NET几大热点问题（.NET人员必读）
下面收集了关于.NET几大热点问题及简要答案,防止我们回答问题不专业的尴尬.同一时候还将一些.NET资源的相关网址罗列一二. 一．什么是.Net?它主要包含什么? .Net是为简化在第三代因特网的高 ...