HTML/CSS
纯CSS实现小箭头的方法
PetitQ
我们大多数的小箭头都是用小图片来做的，这里分享一款用纯 CSS 写的小箭头，大家可以看看，以后会放出更多的 CSS 小箭头来供大家参考。
<div class="pre-wrap">
<div class="pre">
<div class="pre1"></div>
<div class="pre2"></div>
</div>
</div>
<style>
.pre-wrap {
width: 200px;
height: 120px;
margin: 50px auto 0;
border: 2px solid #F00;
border-radius: 4px;
position: relative;
}.pre {
width: 80px;
height: 80px;
position: absolute;
top: 20px;
left: 40px;
}.pre1 {
border-width: 40px;
border-color: transparent #F30 transparent transparent;
}.pre2 {
border-width: 40px;
border-color: transparent #FFF transparent transparent;
position: relative;
top: -80px;
left: 15px;
}.pre1, .pre2 {
/*****设置border-style:dashed;使ie6支持border透明*****/border-style: dashed solid dashed dashed;
/*****设置容器宽高为0*****/width: 0;
height: 0;
/*****去掉ie6下默认高度，设置以下属性*****/line-height: 0;
font-size: 0;
overflow: hidden;
}</style>
也想出现在这里？联系我们吧
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
