网站中不论是导航还是下拉,往往有些小三角,制作方式有几下几种:
方法一
主要思想:使用一个矩形,盖住一个菱形的上半部分,则显示下三角;盖住下半部分,则显示上三角。主要代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小三角</title>
<meta content="主要思想:使用i和s标签,i为矩形框,s为菱形(输入法,软键盘的特殊符号),i覆盖s,盖住菱形上半部分,则显示下三角;调整定位的top值,即可显示上三角" >
<style>
body{
margin: 0;
padding: 0;
font-size: 15px;
}
.fl{
float: left;
}
i,s{
font-weight: normal;
font-style:normal;
text-decoration: none;
}
.header{
height: 30px;
line-height: 30px;
background-color: #f1f1f1;
}
.header .banxin{
width: 980px;
margin: 0 auto;
}
.header .banxin .sendArea{
display: inline-block;
padding: 0 25px 0 15px;
background-color: pink;
position: relative;
}
.header .banxin .sendArea i{
display: inline-block;
width: 15px;
height: 7px;
background-color: yellow;
position: absolute;
top:12px;
right:5px;
overflow: hidden;
}
.header .banxin .sendArea i s{
font: 400 15px/15px "宋体";
position: absolute;
top:-6px;
right: 0;
}
</style>
</head>
<body>
<div class="header">
<div class="banxin">
<div class="sendArea fl">
送至范围:杭州<i><s>◇</s></i>
</div>
</div>
</div>
</body>
</html>
注:特殊符号为空菱形◇,则为两条边的小三角。
将特殊符号改为实体菱形◆,则为实体小三角。比较灵活,但需要输入法的软键盘帮助!
方法二:
主要思想:两个三角(三角的制作方法可参考下一篇-实体小三角),①号三角为背景颜色,②号三角为箭头颜色,①号盖住②号,露出一个角。主要代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝三角</title>
<!-- 主要思想:两个三角叠加,上面的为白色,盖住红色,露出一个小三角 -->
<style>
body{
margin: 0;
padding: 0;
font-size: 15px;
}
.fl{
float: left;
}
i,s{
font-weight: normal;
font-style:normal;
text-decoration: none;
}
div.banxin{
width:980px;
height:30px;
margin:0 auto;
background-color: #f1f1f1;
}
/*以上为基本设置和版心设置*/
div.content{
height:30px;
line-height: 30px;
background-color: pink;
padding: 0 25px 0 10px;
position: relative;
}
div.content b{
display: inline-block;
height: 0;
width: 0;
border-width:8px;
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
div.content .one{
border-color: pink transparent transparent transparent;
position: absolute;
top:10px;
right:5px;
z-index:1;
}
div.content .two{
position: absolute;
top:11px;
right:5px;
}
</style>
<script>
</script>
</head>
<body>
<div class="banxin">
<div class="content fl">
我是向下的小箭头,只有两条边哦
<b class="one"></b>
<b class="two"></b>
</div>
</div>
</body>
</html>