css画图案

最新推荐文章于 2023-04-03 16:02:18 发布

DonkeyMini

最新推荐文章于 2023-04-03 16:02:18 发布

阅读量473

点赞数

分类专栏： CSS/HTML基础

本文链接：https://blog.csdn.net/DonkeyMini/article/details/73650902

版权

CSS/HTML基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>画图</title>
	<style>
		body{padding: 100px;}
		*{margin:0;padding: 0}
		li{list-style: none;}
		.container{margin:100px auto;position: relative;}
		.quadrangle{}
		.first,.other li{width:200px;height: 36px;margin-right: 5px;}
		.first{border-top-left-radius: 18px;border-bottom-left-radius: 18px;border-top-right-radius: 15px;float: left;border: 2px solid #77c077;-webkit-transform: skew(30deg);}
		.other{float: left;}
		.other li{float: left;border-radius: 10px;border: 2px solid #77c077;
			-webkit-transform: skew(30deg);}
		.line {width: 1032px;background: #689731;height: 5px;position: absolute;top: 36px;border-bottom-left-radius: 20px;left: 18px;border-bottom-right-radius: 20px;}
	</style>
</head>
<body>
	<div class="container">
		<!-- 四边形 -->
		<div class="quadrangle">
			<div class="first"></div>
			<ul class="other">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!-- 横线 -->
		<div class="line"></div>
	</div>
</body>
</html>

DonkeyMini

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css画图案

如图画图 body{padding: 100px;} *{margin:0;padding: 0} li{list-style: none;} .container{margin:100px auto;position: relative;} .quadrangle{} .first,.other li{width:200px;height: 36px;
复制链接

扫一扫

专栏目录