div中利用边框做三角行div

最新推荐文章于 2023-03-14 21:25:22 发布

小影

最新推荐文章于 2023-03-14 21:25:22 发布

阅读量578

点赞数 1

本文链接：https://blog.csdn.net/small_shadow/article/details/104601682

版权

网页中有很多三角行的部分，例如下图这两个例子
在这里插入图片描述

像这样的例子就可以用边框来做。

一、利用不同位置边框重合部分

两个相邻边框重合后会各分一半，像下面代码展示的一样

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			.border_1 {
				border-top: 50px solid blue;
				border-right: 50px solid greenyellow;
				border-left: 50px solid hotpink;
				border-bottom: 50px solid black;
				width: 0px;
				height: 0px;
				background-color: red;
			}
			
		</style>
	</head>

	<body>
		<div class="border_1"></div>
	</body>

</html>

在这里插入图片描述
可以只写相邻的两个边框，就可以达到长方形分成两个三角行的样子了。

二、利用边框的transparent

transparent可以使边框透明，相邻边框一个透明一个不透明就会出现三角形了

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			.border_1{
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
			.border_2{
				border-left: 50px solid transparent;
				border-top: 50px solid blue;
				width: 0;
				height: 0;
				float: right;
			}
		</style>
	</head>

	<body>
		<div class="border_1">
			<div class="border_2"></div>
		</div>
	</body>

</html>

在这里插入图片描述
当然还有其他很多方法，这只是一种参考。