使用css（border）边框实现倒三角
浏览数：22 /
时间：2015年06月09日
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用border制作倒三角</title>
</head>
<body>
<style>
.arrow_01 {
width: 0;
height: 0;
border: 60px solid #000;
border-color: blue transparent transparent transparent;
}
.arrow_02 {
width: 0;
height: 0;
border: 60px solid #000;
border-color: transparent blue transparent transparent;
}
.arrow_03 {
width: 0;
height: 0;
border: 60px solid #000;
border-color: transparent transparent blue transparent;
}
.arrow_04 {
width: 0;
height: 0;
border: 60px solid #000;
border-color: transparent transparent transparent blue;
}
.arrow_05 {
width: 0;
height: 0;
border: 60px solid #000;
border-color: blue blue transparent transparent;
}
.arrow_06 {
width: 0;
height: 0;
border: 60px solid #000;
border-color: transparent transparent blue blue;
}
.arrow_07 {
width: 0;
height: 0;
border: 60px solid #000;
border-color: transparent blue blue transparent;
}
</style>
<div class="arrow_01"></div>
<div class="arrow_02"></div>
<div class="arrow_03"></div>
<div class="arrow_04"></div>
<div class="arrow_05"></div>
<div class="arrow_06"></div>
<div class="arrow_07"></div>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
