用div+css实现三角形，三角形内有字

你们都是坏人 2013-12-19 01:19:29

用div+css实现三角形，三角形内有字
如下图：

...全文

918 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

你们都是坏人 2013-12-19

打赏
举报

引用 1 楼 zyl_lyr1019 的回复:

用定位模拟呢的，试试看哦。

比下面这个好！


<style type="text/css">   
.topdirection  
{   font-size:0; 
    width:0;height:0;  
    line-height:0;  
    border-width:100px;  
    border-style:solid;  
    border-color: transparent transparent #A9DBF6 transparent;  
}  
</style>  
<div>
<div  class="topdirection"></div>  
<div style="margin:-50px 0px 0px 90px;">重点</div>
</div>

张运领 2013-12-19

打赏
举报

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.a{
	border-bottom:1px solid #aaa;
	height:50px;
	width:100px;
	position:relative;
	overflow:hidden;
}
.b{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:100px;
	height:50px;
}
.b i,.b em{
	position:absolute;
	left:0px;
	bottom:0px;
	border-color:transparent;
	border-color:rgba(255,255,255,0);
	border-style:solid;
	border-width:0 50px 50px 50px;
}
.b i{
	border-bottom-color:#aaa;
}
.b em{
	border-bottom-color:#FFF;
	bottom:-1px;
}
.text{
	position:absolute;
	bottom:10px;
	background:none;
	border:none;
	outline:none;
	text-align:center;
	width:100%;
}
</style>
</head>
<body>
<div class = "a">
	<span class = "b">
		<i></i>
		<em></em>
	</span>
	<input type = "text" value = "文字" class = "text"/>
</div>
</body>
</html>

用定位模拟呢的，试试看哦。