CSS样式与布局实验-优快云博客

本文链接：https://blog.youkuaiyun.com/wyzxzws/article/details/84736505

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>CSS测试</title>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-title" content="CSS测试">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0" name="viewport" />
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait">
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- 不显示工具栏和菜单栏 -->
		<meta name="format-detection" content="telphone=no, email=no" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<style type="text/css">
			*{
				border:0;
				margin:0;
				padding:0;
				box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				-ms-box-sizing:border-box;
				-o-box-sizing:border-box;
			}
			html,body{
				width:100%;
				font-size:14px;
				font-family:宋体;
			}
			body{
				padding:50px;
			}
			hr{
				height: 2px;
				width: 100%;
				background: #ddd;
				margin: 5px 0;
			}
			.ws-arr{
				font-size:0;
			}
			.ws-arrl{
				width:0;
				border:20px solid #fff;
				border-left:0;
				border-right-color:red;
			}
			.ws-arrr{
				width:0;
				border:20px solid #fff;
				border-right:0;
				border-left-color:red;
			}
			.ws-arru{
				width:0;
				border:20px solid #fff;
				border-bottom:0;
				border-top-color:red;
			}
			.ws-arrd{
				width:0;
				border:20px solid #fff;
				border-top:0;
				border-bottom-color:red;
			}
			.ws-arr-q{
				width:0;
				border:20px solid #fff;
				border-top-color:red;
				border-bottom-color:red;
				border-left-color:blue;
				border-right-color:blue;
			}
			.ws-arr-qh{
				width:0;
				border:20px solid #fff;
				border-left-color:red;
				border-right-color:red;
				border-top-color:blue;
				border-bottom-color:blue;
			}
			.ws-arr-qn{
				width:0;
				border:20px solid #fff;
				border-top-color:red;
				border-bottom-color:red;
			}
			.ws-arr-qhn{
				width:0;
				border:20px solid #fff;
				border-left-color:red;
				border-right-color:red;
			}
			.ws-arr-c div{
				  border-left-color: red;
				    border-right-color: red;
					  border-bottom-color: #fff;
					    border-top-color: #fff;
			}
		</style>
	</head>

	<body>
		<div class="ws-arr">
			<div class="ws-arrl"> </div>
			<hr/>
			<div class="ws-arrr"> </div>
			<hr/>
			<div class="ws-arru"> </div>
			<hr/>
			<div class="ws-arrd"> </div>
			<hr/>
			<div class="ws-arr-q"> </div>
			<hr/>
			<div class="ws-arr-qn"> </div>
			<hr/>
			<div class="ws-arr-qh"> </div>
			<hr/>
			<div class="ws-arr-qhn"> </div>
			<hr/>
			<div class="ws-arr-du">
				<div class="ws-arrd"> </div>
				<div class="ws-arru"> </div>
			</div>
			<hr/>
			<div class="ws-arr-c">
				<div class="ws-arrd"> </div>
				<div class="ws-arru"> </div>
			</div>
		</div>
	</body>

</html>