您的位置：首页 > 其它

第二种方法制作三角

2016-03-02 14:46 260 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div.arrow-up {
width:0px;
height:0px;
border-left:20px solid transparent;  /* left arrow slant */
border-right:20px solid transparent; /* right arrow slant */
border-bottom:20px solid #FF9600; /* bottom, add background color here */
font-size:0px;
line-height:0px;
margin-bottom: 10px;
}

/* create an arrow that points down */
div.arrow-down {
width:0px;
height:0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #FF9600;
font-size:0px;
line-height:0px;
margin-bottom: 10px;
}

/* create an arrow that points left */
div.arrow-left {
width:0px;
height:0px;
border-bottom:20px solid transparent;  /* left arrow slant */
border-top:20px solid transparent; /* right arrow slant */
border-right:20px solid #FF9600; /* bottom, add background color here */
border-left: 20px solid transparent;
font-size:0px;
line-height:0px;
}

/* create an arrow that points right */
div.arrow-right {
width:0px;
height:0px;
border-bottom:20px solid transparent;  /* left arrow slant */
border-top:20px solid transparent; /* right arrow slant */
border-left:20px solid #FF9600; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
</style>
</head>
<body>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>

这种方法是隐藏其他三边，显示剩下的一个border

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航