CSS - border -绘画（梯形、三角形）

最新推荐文章于 2024-02-21 20:49:08 发布

原创最新推荐文章于 2024-02-21 20:49:08 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用CSS的边框属性来绘制各种形状，包括梯形、三角形和圆形，展示了CSS的强大功能和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

画梯形

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>border</title>
	<!-- 画梯形 -->
	<style type="text/css">
		.bd {
			width: 100px;
			height: 100px;
			background-color: transparent;
		}
		.bd {
			/*border: 50px solid orange;*/

			border-top: 50px solid orange;
			border-right: 50px solid cyan;
			border-bottom: 50px solid yellow;
			border-left: 50px solid blue;
    
			/*隐藏*/
			/*border-right: 50px solid transparent;
			border-bottom: 50px solid transparent;
			border-left: 50px solid transparent;*/
		}
	</style>
</head>
<body>
	<div class="bd"></div>
</body>
</html>

画三角形

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>border</title>
	<!-- 画梯形 -->
	<style type="text/css">
		.bd {
			width: 100px;
			height: 100px;
			background-color: transparent;
		}

	<!-- 画三角形 -->
		.bd {
			width: 0;
			height: 0;
		}
		.bd {
			border-top: 50px solid orange;
			border-right: 50px solid cyan;
			border-bottom: 50px solid yellow;
			border-left: 50px solid blue;
		}

	</style>
</head>
<body>
	<div class="bd"></div>
</body>
</html>

吃豆豆

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>border</title>
	<!-- 画梯形 -->
	<style type="text/css">
		.bd {
			width: 100px;
			height: 100px;
			background-color: transparent;
		}
	<!-- 画三角形 -->
		.bd {
			width: 0;
			height: 0;
		}
		.bd {
			border-top: 50px solid orange;
			border-right: 50px solid cyan;
			border-bottom: 50px solid yellow;
			border-left: 50px solid blue;
		}
		/*吃球球的小球*/
		.bd {
			border-radius: 50%;
			border-right: 50px solid transparent;
		}
	</style>
</head>
<body>
	<div class="bd"></div>
</body>
</html>