<!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 />
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
522
收藏
