1.基础三角形.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局css以及辅助css</title>
<style type="text/css"> /***1: 初始样式设置*******/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; } /*******2: 清除浮动******/ /*IE6, IE7 生效*/
.floatfix{
*zoom:1;
} /*其他浏览器*/
.floatfix:after{
content:"";
display:table;
clear:both;
} /***3: 超出长度显示省略号. 还需要设置width**/ .ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} .all {
width: 80%;
margin: 30px auto;
} .row {
border: 1px solid black;
margin: 10px;
padding: 10px;
} p {
color: red;
} /*****4: 三角****************/ .triangle {
width: 0;
height: 0;
border-top: 20px solid #EEB422;
border-right: 20px solid #C0FF3E;
border-bottom: 20px solid #A020F0;
border-left: 20px solid #7CFC00;
} .triangle-up4 {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #A020F0;
border-left: 20px solid transparent;
} .triangle-down4 {
width: 0;
height: 0;
border-top: 20px solid #EEB422;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
} .triangle-left4 {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid #C0FF3E;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
} .triangle-right4 {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #7CFC00;
} .triangle-up {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 40px solid #A020F0;
border-left: 20px solid transparent;
} .triangle-down {
width: 0;
height: 0;
border-top: 40px solid #EEB422;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
} .triangle-left {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 40px solid #7CFC00;
} .triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 40px solid #C0FF3E;
} .triangle-left-bottom {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #7CFC00;
} .triangle-right-bottom {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 40px solid #C0FF3E;
} .triangle-left-up {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-left: 40px solid #7CFC00;
} .triangle-right-up {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-right: 40px solid #C0FF3E;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head>
<body> <div class="all"> <hr>
<p>使用border的4个方向</p>
<div class="row">
<span>四个三角</span>
<div class="triangle">
</div>
</div> <div class="row">
<span>四个三角-上</span>
<div class="triangle-up4">
</div>
</div> <div class="row">
<span>四个三角-下</span>
<div class="triangle-down4">
</div>
</div> <div class="row">
<span>四个三角-左</span>
<div class="triangle-left4">
</div>
</div> <div class="row">
<span>四个三角-右</span>
<div class="triangle-right4">
</div>
</div> <hr>
<p>使用border的3个方向</p>
<div class="row">
<span>上三角</span>
<div class="triangle-up">
</div>
</div>
<div class="row">
<span>下三角</span>
<div class="triangle-down">
</div>
</div>
<div class="row">
<span>左三角</span>
<div class="triangle-left">
</div>
</div>
<div class="row">
<span>右三角</span>
<div class="triangle-right">
</div>
</div> <hr>
<p>使用border的2个方向</p>
<div class="row">
<span>左下角</span>
<div class="triangle-left-bottom">
</div>
</div>
<div class="row">
<span>右下角</span>
<div class="triangle-right-bottom">
</div>
</div> <div class="row">
<span>左上角</span>
<div class="triangle-left-up">
</div>
</div>
<div class="row">
<span>右上角</span>
<div class="triangle-right-up">
</div>
</div> </div> </body>
</html>
显示:
注意:
1)border 可以设置四个, 出现的就是 四个三角 , 四个三角-上, 四个上角-下, 四个三角-左 , 四个三角-右
2) border 可以设置三个, 出现的是 上三角, 下三角, 左三角, 右三角
4)border 可以设置 两个, 出现的是 左下角, 右下角 , 左上角, 右上角
这是因为?
