展会信息港展会大全

纯css实现精美箭头代码 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:29:19   浏览:2389次  

导读:本文章介绍一篇简单的确关于纯css实现精美箭头代码,有需要的同学可以参考一下下哦。图:HTML代码:代码如下复制代码 <div class=...

本文章介绍一篇简单的确关于纯css实现精美箭头代码,有需要的同学可以参考一下下哦。

图:

HTML代码:

代码如下

复制代码

<div class="pre-wrap">

<div class="pre">

<div class="pre1"></div>

<div class="pre2"></div>

</div>

</div>

CSS代码:

.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;

}

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港