CSS画三角形

最新推荐文章于 2024-01-23 14:31:29 发布

zs806661306

最新推荐文章于 2024-01-23 14:31:29 发布

阅读量238

点赞数

分类专栏： web前端开发文章标签： css三角形 transparent css菱形

本文链接：https://blog.csdn.net/qq_27381193/article/details/53378021

版权

web前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

将元素的width和height设置为0。设置border的left，right，top，bottom值。

transparent：透明。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS画三角形</title>
	<style>
		#top{
                       width: 0px;
                       height: 0px;
                       border-left:50px solid transparent;
                       border-top:50px solid red;
                       border-right:50px solid transparent;
		}
		#left{
			width: 0px;
			height: 0px;
			border-left:50px solid blue;
			border-top:50px solid transparent;
			border-bottom:50px solid transparent;
		}
		#bottom{
			width: 0px;
			height: 0px;
			border-left:50px solid transparent;
			border-bottom:50px solid green;
			border-right:50px solid transparent;
		}
		#right{
			width: 0px;
			height: 0px;
                        border-right:50px solid purple;
			border-top:50px solid transparent;
			border-bottom:50px solid transparent;
		}
		#all{
			width: 0px;
			height: 0px;
                        border-right:50px solid purple;
			border-top:50px solid red;
			border-bottom:50px solid green;
			border-left:50px solid blue;
		}
	</style>
</head>
<body>
	<div id="top"></div>
	<div id="left"></div>
	<div id="bottom"></div>
	<div id="right"></div>
	<div id="all"></div>
</body>
</html>

zs806661306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS画三角形

将元素的width和height设置为0。设置border的left，right，top，bottom值。transparent：透明。 CSS画三角形 #top{ width: 0px; height: 0px; border-left:50
复制链接

扫一扫

专栏目录