css 字符制作三角边框 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字符制作三角边框</title>
<style>
*{margin:0;padding:0;}
/* 方式一 margin */
.test{font-family:SimSun; width:300px; margin:0 auto; border:1px solid #F00; margin-top:20px; height:100px;}
.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; margin:50px auto; height:100px; position:relative;}
.box em,.box span{font-style:normal;font-size:30px; position:absolute; left:-16px; top:40px; color:#F00;}
.box span{left:-14px; color:#fff; }
</style>
</head>
<body>
<div class="test">
    <em>&#9670;</em>
    <span>&#9670;</span>
</div>
<div class="box">
    <em>&#9670;</em>
    <span>&#9670;</span>
</div>
</body>
</html>

 

posted @ 2013-05-20 17:38  zhangchun  阅读(518)  评论(0)  编辑  收藏  举报