纯CSS实现小箭头的案例

我们大多数的小箭头都是用小图片来做的，这里分享一款用纯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>

您可能感兴趣的文章：
纯CSS实现小箭头的案例
PHP打印左右箭头图案的实现方法（代码示例）
UTF-8 箭头
用CSS改变鼠标样式
css的变量和继承的学习笔记
css padding 与margin的区别
利用纯CSS制作冒泡提示框效果
让网站链接样式千奇百怪
利用HTML5的details, summary实现各种交互效果
php箭头的用法是什么？