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

用css制作三角形

2013-06-07 14:46 204 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三角形</title>
<style type="text/css">
*{ margin:0; padding:0;}

.tool_tip{

display:block;
position: relative;
margin-top:20px;
padding: 2px 5px;
word-break: break-all;
width: 78px;
line-height: 16px;
border: 1px solid #fec3a8;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
background:#fff;

}
address,code,caption,th,cite,dfn,em,var{font-style:normal;}
.box{
margin:100px auto;
padding:20px; background:#fff;
border:1px solid #ccc;
font-size:12px;
width:600px;
}
.tool_tip b{
top: -8px;
color: #fec3a8;
position:absolute;
width:18px;
height:8px;
left:37px;
font: 16px/21px Simsun;/*字体要注意*/
overflow:hidden;
}
.tool_tip i{
position: absolute;
font: 16px/21px Simsun;/*字体要注意*/
left: 37px;
width: 18px;
top:-7px;
height: 7px;
overflow: hidden;
color:#fff;
}
.tool_tip em{
display: block;
height: 32px;
overflow: hidden;
font-family:"宋体";
}

.box li{
list-style:none;
height:30px;
line-height:30px;
}
.box li span{
float:left;
}
.box li em{
float:right;
}
.box li code{
border: dashed 5px;
border-color: transparent transparent transparent #f60;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
border-left-style: solid;
vertical-align:middle;
display:inline-block;/*兼容ie7一下的版本*/
}
</style>
</head>

<body>

<div class="box"><span class="tool_tip">
<b>◆</b>
<i>◆</i>
<em>提示框</em>
</span>
<code class="arr_r"></code>

<ul>
<li><span><code></code><a href="#">1111</a></span> <em>2013-06-07</em></li>
<li><span><code></code><a href="#">22222</a></span> <em>2013-06-07</em></li>
<li><span><code></code><a href="#">33333</a></span> <em>2013-06-07</em></li>
</ul>
</div>

</body>
</html>

在线预览：http://www.ostools.net/jsbin/fpxjelsv/6/edit

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航