CSS - 三角形【2018.11.23】

最新推荐文章于 2023-01-30 21:08:36 发布

转载最新推荐文章于 2023-01-30 21:08:36 发布 · 121 阅读

CSS 每日一练专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用纯CSS技术创建三角形的方法。通过设置宽度、高度为0，并利用边框属性，可以巧妙地生成一个黄色绿色的三角形。这种方法不需要额外的图片资源，适用于网页设计中需要三角形元素的各种场景。

<html>
<head>
	<title>三角形</title>
	<style type="text/css">
		.traingle{
			width:0;
			height:0;
			border-left:50px solid transparent;
			border-right:50px solid transparent;
			border-bottom:100px solid yellowgreen;
		}
	</style>
</head>
<body>
	<div class="traingle"/>
</body>
</html>