Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 纯CSS实现小箭头的案例

纯CSS实现小箭头的案例

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供纯CSS实现小箭头的案例等资源,欢迎您收藏本站,我们将为您提供最新的纯CSS实现小箭头的案例资源
小箭头我们许多的美工前端使用的是图片来实现了,如果我们不使用图片直接使用css要如何来实现呢,下面我们来看一篇关于纯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>

您可能感兴趣的文章:
jQuery探测位置的提示弹窗(toolTip box)详细解析
js实现图片上显示左右箭头类似翻页效果的代码
7款吸引人眼球的jQuery/CSS3特效实例分享
使用JQUERY进行后台页面布局控制DIV实现左右式
jQuery(非HTML5)可编辑表格实现代码
使用CSS和jQuery模拟select并附提交后取得数据的代码
Jquery原生态实现表格header头随滚动条滚动而滚动
jQuery数据显示插件整合实现代码
CSS+Jquery实现页面圆角框方法大全
jquery实现的可隐藏重现的靠边悬浮层实例代码

[关闭]