您的位置：首页 > Web前端 > CSS

CSS 实现箭头

2013-11-13 12:14 169 查看
相对来说CSS 实现箭头产生的效果简单一点，根据需要来安排。

毕竟有些效果是CSS 无法实现的 那就直接切图吧！

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>三角形叠加</title>

<style type="text/css">

<!--

.pos_rel {

position:relative;

_line-height:0;

width:40px;

height:23px;

}

.pos_rel .icon1 {

display: block;

border-width: 5px 5px 5px 0px;

border-color: transparent rgb(28, 126, 207) transparent transparent;

border-style: solid;

position: absolute;

left: 0px;

top: 13px;

width: 0px;

height: 0px;

z-index: 100;

}

.pos_rel .icon2 {

display: block;

border-width: 6px 6px 6px 0px;

border-color: transparent rgb(255, 255, 255) transparent transparent;

border-style: solid;

position: absolute;

left: 1px;

top: -6px;

width: 0px;

height: 0px;

}

-->

.contentbox {

border: 1px solid rgb(28, 126, 207);

position: absolute;

background-color: rgb(255, 255, 255);

width: 100%;

height: 100%;

padding: 5px;

box-shadow: 3px 3px 4px rgb(153, 153, 153);

left: 5px;

border-radius: 3px 3px 3px 3px;

}

</style>

</head>

<body>

<div class="pos_rel"> <span class="icon1"><span class="icon2"></span></span>

<div class="contentbox"> … </div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航