Home > Article > Web Front-end > CSS通过边框border-style来写小三角_html/css_WEB-ITnose
CSS通过边框border-style来写小三角_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:27:561885browse
<!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 />
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：bulmaNext article：关于css浮动框是否脱离文档流的分析_html/css_WEB-ITnose