用div+css实现三角，三角形内有字-HTML教程-爱易网页

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

日期：2014-05-16　浏览次数：20668 次

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

------解决方案--------------------

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