css三角形
css三角
<!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>