用css制作三角形

最新推荐文章于 2023-08-21 14:47:29 发布

雅格衣裳

最新推荐文章于 2023-08-21 14:47:29 发布

阅读量562

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/hhffhh/article/details/9047455

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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

雅格衣裳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用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:
复制链接

扫一扫