CSS画各种二维图形
2024-06-14 11:05:38
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画各种二维图形相关推荐
- Android开发指南-二维图形
二维图形2D Graphics Android 提供一个定制的2D图形库,用来绘制图形图像和制作动画.你将从android.graphics.drawable和android.view.animati ...
- matlab 如何画二维图形,Matlab 学习 画图篇 一 二维图形
matlab给绘制二维图形提供了很多的函数,把一些绘制二维图形的基本函数做成一张表,如下图所示: 我就按照表的顺序一一记录一些个函数的简略用法. 首先是 1.plot函数 plot函数有很多重载方法, ...
- matlab画二维颜色深浅,matlab中如何为二维图形填充渐进的颜色
t1=(0:11)/11*pi; t2=(0:400)/400*pi; t3=(0:50)/50*pi; y1=sin(t1).*sin(9*t1); y2=sin(t2).*sin(9*t2); y ...
- python画二维图_使用python绘制二维图形示例
我就废话不多说了,直接上代码吧! import matplotlib.pyplot as plt #也可以使用 import pylab as pl import matplotlib.font_ma ...
- 计算机图形学二维图形基本变换实验原理,计算机图形学实验：二维图形变换.docx...
计算机图形学实验:二维图形变换.docx (9页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分 实验三 二维图形变换一.实验任务1． 通 ...
- matlab图片包微盘,如何用Matlab绘制二维图形资料下载
简要 上一篇已经对图形的属性有过介绍,在此基础上来进行二维以及后续三维图形的操作(注:没接触过其他维度的操作,就不折腾相关的内容了),将会更容易理解这些属性的用法,当然,全部的属性使用都来一遍,感觉就 ...
- CAD三维图形转化成二维图形的过程具体的步骤
输入这个命令MSPACE然后再输入这个命令solprof选中你的图纸.然后敲回车,再输入Y敲回车,连续三次.然后回到模型空间.关闭第一第二两个图层,就是你想要的二维图了.把它挪开,然后把关闭的图层打开 ...
- 【OpenGL ES】二维图形绘制
目录 OpenGL ES 学习--2D 着色器语言基础知识 绘制纯色背景 JAVA版本 C++版本 绘制圆点.直线.三角形 JAVA版本 C++版本 绘制彩色三角形 JAVA版本 C++版本 绘制纯色 ...
- 计算机图形学实验一(二维图形绘制)
计算机图形学实验一(二维图形绘制) 一.实验内容 二.实验环境 三.问题分析 四.算法设计 五.源代码 六.程序运行结果 一.实验内容 (1)绘制金刚石图案 金刚石图案的成图规则是:把一个圆周等分成n ...
最新文章
- 2019年1月份访问量超过1千的文章
- C++ 哪些函数不能声明成虚函数
- JUnit 5中的测试执行顺序
- php实现ftp上传,PHP_PHP实现ftp上传文件示例，FTP上传是PHP实现的一个常见且 - phpStudy...
- java设置按钮调用问题_按钮相关问题：尝试在空对象引用上调用虚方法
- php order by 3-- 没反应,Thinkphp 无法使用-)order() 排序的两种解决办法！
- c语言名著摘抄——语法及实例
- Swift实现LRU缓存淘汰算法
- oracle ocp考题,Oracle OCP认证考试题库更新，052新考题整理（带答案）-72
- 凯恩帝1000对刀图解_KND数控车床对刀方法
- Git查询一定时间范围团队代码提交日志
- 中国农业大学2020计算机院线,2020年中国农业大学考研分数线公布
- SAP GOS cl_gos_manager 添加附件功能
- Word文档加密器(最新版V6.0)
- 联发科p60和骁龙710哪个好_骁龙710、麒麟710和联发科P60哪个好 性能对比测试 (全文)...
- css改变hr的默认样式
- 事业单位计算机技术岗工资,事业单位管理岗和技术岗工资区别，不得不知！
- JavaWeb 页面跳转方式连接数据库
- 句柄数、连接数、线程数等查询
- 如何设计一个比较通用的爬虫系统