border 与三角

以上是各种效果图，分左右两排，竖着看，顺序是 1-6
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		body{padding: 20px;}
		.box1{
			width: 100px;
			height: 100px;
			background-color: pink;
			border: solid 20px;
			border-color: red green blue purple;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: #fff;
			border: solid 20px;
			border-color: red transparent transparent transparent;
		}
		.box3{
			width: 0;
			height: 0;
			background-color: #fff;
			border: solid 100px;
			border-color: red transparent transparent transparent;
		}
		.box4{
			width: 0;
			height: 0;
			background-color: #fff;
			border-style: solid;
			border-width: 100px 100px 0 0;
			border-color: red green transparent transparent;
		}
		.box4{
			width: 100px;
			height: 100px;
			background-color: #fff;
			border-style: solid;
			border-width: 100px 100px 0 0;
			border-color: red green transparent transparent;
		}

		.box5{
			width: 100px;
			height: 40px;
			border: 1px solid #000;
			border-radius: 5px;
			position: relative;
		}
		.box5 .i1{
			width: 0;
			height: 0;
			border: solid 10px;
			border-color: #000 transparent transparent transparent;
			position: absolute;
			left: 50%;
			bottom: -10px;
			margin: -10px;
		}
		.box5 .i2{
			width: 0;
			height: 0;
			border: solid 10px;
			border-color: #fff transparent transparent transparent;
			position: absolute;
			left: 50%;
			bottom: -9px;
			margin: -10px;
		}

		.box6{
			width: 300px;
			height: 100px;
			background-color: pink;
			position: relative;
		}
		.box6 .text{
			color: #fff;
			background-color: green;
			position: absolute;
			top: 0;
			right: -5px;
			padding: 0 15px;
		}
		.box6 .text i{
			width: 0;
			height: 0;
			position: absolute;
			right: 0;
			bottom: -5px;
			border-style: solid;
			border-width: 5px 5px 0 0;
			border-color: blue transparent;
		}
	</style>
</head>
<body>
	<!-- border 的测试 -->
	<div class="box1"></div>
	<div style="width: 100%; height: 50px"></div>
	<div class="box2"></div>
	<div style="width: 100%; height: 50px"></div>
	<div class="box3"></div>
	<div style="width: 100%; height: 50px"></div>
	<div class="box4"></div>
	<div style="width: 100%; height: 150px"></div>

	<!-- border 的实用 -->
		<!-- 实现边框边上的三角，原理：i1, i2 都是三角，只是 i1 与边框同色，i2 与背景同色，i2 向上偏移了 1px -->
	<div class="box5">
		<i class="i1"></i>
		<i class="i2"></i>
	</div>
	<div style="width: 100%; height: 50px"></div>

		<!--  -->
	<div class="box6">
		<span class="text">测试<i></i></span>
	</div>
	<div style="width: 100%; height: 50px"></div>

		<!-- 带三角的导航栏 -->
</body>
</html>
猜你喜欢
