CSS通过边框border-style来写小三角_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:27:561924浏览
<!DOCTYPE html><br />
/*直接复制代码即可在浏览器验证*/<br /><br /><html>
<head lang="en"><br /> <meta charset="UTF-8"><br /> <title></title><br /> <style><br /> * {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> /*盒子的样式*/<br /> .box {<br /> position: relative;<br /> margin: 20px auto;<br /> height: 200px;<br /> width: 200px;<br /> background: rgba(0, 0, 0, 0.5);<br /> }<br /> /*利用border-style实现*/<br /> .drop-down {<br /> position: absolute;<br /> top: 10px;<br /> left: 10px;<br /> height: 0;<br /> width: 0;<br /> border: 3px;<br /> /*style依次是上边框、右、下、左*/<br /> border-style: solid dashed dashed dashed;<br /> /*想实现向下的三角就把上边框设置为实现其余几个边框都是虚线并且颜色设置为透明*/<br /> border-left-color: transparent;<br /> border-right-color: transparent;<br /> border-bottom-color: transparent;<br /> color: #fff;<br /> }<br /><br /> /*再来写个三角向右的例子*/<br /> .right {<br /> position: absolute;<br /> top: 10px;<br /> left: 30px;<br /> height: 0;<br /> width: 0;<br /> border:10px;<br /> border-style:dashed dashed dashed solid;<br /> border-top-color: transparent;<br /> border-right-color: transparent;<br /> border-bottom-color: transparent;<br /> color: yellowgreen;<br /> }<br /><br /><br /> </style><br /></head><br /><body><br /><!--先写个盒子加上黑色背景，来和生成的小三角来做下对比--><br /><div class="box"><br /> <i class="drop-down"></i><br /> <i class="right"></i><br /></div><br /><br /></body><br /></html><br /><br /><br /><br />
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn