51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

纯CSS 三角形箭头Div边框代码

时间:2017-08-17 11:06点击:

代码如下   请自行分析



<html>
<head>
<meta charset="utf-8">
<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 style="padding: 40px; background:#fff;" _mce_style="padding: 40px; background: #fff;">
<div class="wp">
<span class="arrow"></span>“三角形箭头”例1</div>
<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position: relative;
 background: red; padding: 20px; color: #fff; margin-


bottom: 30px;">
<span style="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="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border:
 16px dashed dashed solid dashed transparent transparent 


red transparent;"></span>“三角形箭头”例1</div>
<div style="position: relative; border: 4px solid red; padding: 20px; margin-bottom: 30px;" _mce_style="position: relative;
 border: 4px solid red; padding: 20px; margin-bottom: 


30px;">
<span style="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="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border:
 16px dashed dashed solid dashed transparent transparent 


red transparent;"></span><span style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border-width:
 16px; border-style: dashed dashed solid dashed; 


border-color: transparent transparent #FFF transparent;" _mce_style="position: absolute; left: 30px; top: -27px; width: 0; height:
 0; font-size: 0; border: 16px dashed dashed solid 


dashed transparent transparent #FFF transparent;"></span>“三角形箭头”例2</div>
<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position: relative;
 background: red; padding: 20px; color: #fff; margin-


bottom: 30px;">
<span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style:
 dashed dashed dashed solid; border-color: transparent 


transparent transparent red;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0;
 border: 16px dashed dashed dashed solid transparent transparent 


transparent red;"></span>“三角形箭头”例3</div>
<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position: relative;
 background: red; padding: 20px; color: #fff; margin-


bottom: 30px;">
<span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px 24px;
 border-style: dashed dashed dashed solid; border-color: transparent 


transparent transparent red;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0;
 border: 16px 24px dashed dashed dashed solid transparent 


transparent transparent red;"></span><span style="position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0;
 border-width: 16px; border-style: dashed dashed solid 


dashed; border-color: transparent transparent #fff transparent;" _mce_style="position: absolute; left: 14px; top: -32px; width: 0;
 height: 0; font-size: 0; border: 16px dashed dashed solid 


dashed transparent transparent #fff transparent;"></span>“三角形箭头”例4</div>
<div style="position: relative; background: red; width: 160px; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position:
 relative; background: red; width: 160px; 


padding: 20px; color: #fff; margin-bottom: 30px;">
<span style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style:
 dashed dashed solid dashed; border-color: transparent 


transparent red transparent;" _mce_style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0;
 border: 6px dashed dashed solid dashed transparent transparent 


red transparent;"></span>
模拟梯形边<span style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px;
 border-style: solid dashed dashed dashed; border-color: 


red transparent transparent transparent;" _mce_style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0;
 font-size: 0; border: 6px solid dashed dashed dashed red 


transparent transparent transparent;"></span>
</div>
<h2>看看这个例子就会明白所谓“三角边”了</h2>
<div style="border-width:40px;border-style:solid;border-color:red green black blue;line-height:0;font-size:0;overflow:hidden;
width:100px;height:0" _mce_style="line-height: 0; font-size: 


0; overflow: hidden; width: 100px; height: 0; border: 40px solid red green black blue;"></div>
<h2>把某些边透明掉就可以模拟三角形了,注意ie6下透明的边要是dotted或dashed</h2>
<div style="border-width:40px;border-style:dashed dashed solid dashed;border-color:transparent transparent red transparent;
line-height:0;font-size:0;width:0;height:0" _mce_style="line


-height: 0; font-size: 0; width: 0; height: 0; border: 40px dashed dashed solid dashed transparent transparent red transparent;"></div>
<div style="border-width:40px;border-style:dashed solid solid dashed;border-color:transparent blue red transparent;line-height:
0;font-size:0;width:0;height:0" _mce_style="line-height: 


0; font-size: 0; width: 0; height: 0; border: 40px dashed solid solid dashed transparent blue red transparent;"></div>
</div>
<div><A href="http://www.51kydm.com/">http://www.51kydm.com/</A></div>
</body>
</html> 




51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开