三角实现之border

三角实现之border

by xiaobai

HTML

<!--用标签的方式-->
<div class="testA">
    <div class="test-all test-top1"></div>
    <div class="test-all test-top2"></div>
    <div class="test-wrap"></div>
</div>

<!--字符的方式-->
<div class="test">
    <em>&#9670;</em>
    <span>&#9670;</span>
</div>

<div class="box">
    <em>&#9670;</em>
    <span>&#9670;</span>
</div>

<!--Notice:在firefox中设置border的color为transparent时 要注意不要用solid的样式不然会出现黑色阴影框-->

CSS

*{margin:0;padding:0;}
body{ font-family:Arial, Helvetica, sans-serif;}
/* 用标签的方式 */
.testA{width:600px; margin:0 auto;}
.test-wrap{width:200px;height:100px;margin-left:10px; border:1px solid #F00; background:#FFF;}
.test-all{width:0;height:0; font-size:0; margin-left:50px; position:relative;}
.test-top1{
    border-width:10px 10px 10px 10px;
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent #FF0000 transparent;
    margin-bottom:-20px;
    z-index:0;
}
.test-top2{
    border-width:11px 10px 10px 10px;
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent #FFF transparent;
    margin-bottom:-2px;
    z-index:1;
}

/* 字符的方式一 margin */
.test{font-family:SimSun; width:300px;border:1px solid #F00; margin-top:20px; height:100px;margin-left:10px; }
.test em,.test span{ font-style:normal; display:block; width:30px; height:16px;font-size:30px; overflow:hidden;_position:relative; margin-left:10px;}
.test em{ margin-top:-16px; color:#F00;}
.test span{margin-top:-14px; color:#fff;}

/* 字符的方式二 定位 */
.box{font-family:SimSun; width:300px; border:1px solid #F00;height:100px; position:relative;margin:50px auto;}
.box em,.box span{font-style:normal;font-size:30px; position:absolute; left:-16px; top:40px; color:#F00;}
.box span{left:-14px; color:#fff; }