网站中不论是导航还是下拉,往往有些小三角,制作方式有几下几种:
方法一
主要思想:使用一个矩形,盖住一个菱形的上半部分,则显示下三角;盖住下半部分,则显示上三角。主要代码:
<!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>