CSS学习--三角形。

最新推荐文章于 2024-08-01 22:12:00 发布

学渣的前端日记

最新推荐文章于 2024-08-01 22:12:00 发布

阅读量177

点赞数

分类专栏： CSS学习文章标签： CSS

本文链接：https://blog.csdn.net/qq_36521577/article/details/101875687

版权

CSS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>第四节</title>
	<link rel="stylesheet" type="text/css" href="disanjie.css">
</head>
<body>

	<div></div>


</body>
</html>

div{
    
    width: 0px;        //注意width和height为0；
    height: 0px;
	border: 200px solid black;
	border-left-color: yellow;
	border-bottom-color: red;
	border-right-color: blue;
	border-top-color: green;

}

注释：如果width和height不为0，那么中间会有一个width和height相对应的块。

div{
    
    width: 100px;
    height: 100px;
	border: 200px solid black;
	

}

div{
    
    width: 0px;
    height: 0px;
	border: 200px solid transparent;  //transparent透明
	border-left-color: yellow;
	border-bottom-color: yellow;
	

}