css实现简单图形

最新推荐文章于 2024-01-07 18:15:53 发布

LLL_LH

最新推荐文章于 2024-01-07 18:15:53 发布

阅读量237

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/86291366

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{margin: 20px;float: left;}
			
			.box7{width: 100px;height: 50px;background: lawngreen; transform: skew(20deg);}
			.box8{width: 100px;height: 50px;background: lawngreen; transform: skew(-20deg);}
			.box9{width: 0;height: 0;border-right: 40px solid red;border-bottom: 40px solid red;border-radius: 0 50% 50%;transform: rotate(45deg);}
			.box10{width: 0;height: 80px;border-left: 40px solid yellowgreen;border-right: 40px solid yellowgreen;border-bottom: 40px solid transparent;}
			.box11{width: 100px;height: 50px;background: lightcoral;border-radius: 100px 100px 0 0;}
			.box12{width: 50px;height: 50px;background: lightcoral;border-radius: 100px 0 0 0;}
			.box13{width: 0px;height: 0px;border: 50px solid lightcoral;border-top-color: transparent;border-radius: 50px;}
			.box14{width: 100px;height: 100px;background: lightpink;transform: skew(50deg);transform: rotate(45deg);}
		</style>
		
	</head>
	<body>
		<!--平行四方形-->
		<div class="box7"></div>
		<div class="box8"></div>
		<!--水滴-->
		<div class="box9"></div>
		<!--标签页-->
		<div class="box10"></div>
		<!--半圆-->
		<div class="box11"></div>
		<div class="box12"></div>
		<div class="box13"></div>
		<!--菱形-->
		<div class="box14"></div>
	</body>
</html>

LLL_LH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
css实现简单图形

css&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; div{margin: 20px;float: left;} .box7{width: 1
复制链接

扫一扫