你的位置:首页 > 网页设计

[网页设计]纯CSS 三角形箭头Div边框代码


<html>
<head>
<title>纯CSS实现 “三角箭头”代码</title>
<meta http-equiv="Content-Language" content="zh-CN"/>
<mce:style type="text/css"><!--
span {_overflow:hidden;}
.wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;}
.arrow {position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent


red transparent;}
--></mce:style>
<style type="text/css" _mce_bogus="1">
<!--
span {_overflow:hidden;}
.wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;}
.arrow {position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent


red transparent;}
--></style>
</head>
<body>
<div _mce_>
<div >
<span ></span>“三角形箭头”例1</div>
<div _mce_>
<span _mce_></span>“三角形箭头”例1</div>
<div _mce_>
<span _mce_></span><span _mce_></span>“三角形箭头”例2</div>
<div _mce_>
<span _mce_></span>“三角形箭头”例3</div>
<div _mce_>
<span _mce_></span><span _mce_></span>“三角形箭头”例4</div>
<div _mce_>
<span _mce_></span>
模拟梯形边<span _mce_></span>
</div>
<h2>看看这个例子就会明白所谓“三角边”了</h2>
<div _mce_></div>
<h2>把某些边透明掉就可以模拟三角形了,注意ie6下透明的边要是dotted或dashed</h2>
<div _mce_></div>
<div _mce_></div>
</div>
<div>http://www.999jiujiu.com/</div>
</body>
</html>