css三角--小技巧 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			/* 盒子 */
			.box {
				width: 0;
				height: 0;
				border: 100px solid;
				border-color: red green blue pink;
			}

			/* 三角 */
			.box1 {
				width: 0;
				height: 0;
				/* 清除ie6下默认高度和最小高度问题 */
				overflow: hidden;
				font-size: 0;
				line-height: 0;
				
				border: 30px solid;
				border-color: #000000 transparent transparent transparent;
				border-bottom: none;
			}

			/* 空心三角 */
			.box2 {
				width: 1rem;
				height: 1rem;
				border-top: 2px solid #000000;
				border-right: 2px solid #000000;
				transform: rotate(45deg);
			}

			.box3 {
				position: relative;
			}

			.box3 span {
				position: absolute;
				left: 0;
				top: 0;
			}

			.box3 span::before,
			.box3 span::after {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 0;
				height: 0;
				border-width: 5px 5px 0;
				border-style: solid;
				border-color: #fff transparent;
			}

			.box3 span::before {
				top: 2px;
				border-color: blue transparent;
			}


			.box4 {
				width: 20px;
				height: 20px;
				background: yellow;

				position: relative;
			}

			.box4 i {
				width: 0;
				height: 0;
				border-width: 10px 0 10px 10px;
				border-style: solid;
				border-color: transparent yellow;

				position: absolute;
				left: 0;
				top: 0;
			}

			.box4 .right_arr {
				border-left-color: blue;
				left: 1px;
			}

			.box5 {
				width: 20px;
				height: 20px;
				border: 1px solid #000;
				position: relative;
			}

			.box5 i {
				position: absolute;
				left: 0;
				top: 0;
				width: 0;
				height: 0;
				border: 10px solid;
				border-color: #fff transparent;
				border-bottom: none;
			}

			.box5 .down_arr {
				border-top-color: red;
				top: 1px;
			}
		</style>
	</head>
	<body>
		<!-- 三角 -->
		<div class="box"></div><br>

		<div class="box1"></div><br>
		<div class="box2"></div><br>
		<div class="box3">
			<span></span>
		</div>
		<br>
		<!-- 右箭头 -->
		<div class="box4">
			<i class="right_arr"></i>
			<i></i>
		</div><br>
		<!-- 下箭头 -->
		<div class="box5">
			<i class="down_arr"></i>
			<i></i>
		</div>
	</body>
</html>

 

posted @ 2022-01-17 10:23  JackieDYH  阅读(2)  评论(0)  编辑  收藏  举报  来源