听说是百度校招的题目，就写了一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.tri_parent{
position:relative;
width:200px;
height:200px;
margin:40px;
padding:10px;
background:#09C;
}
.tri_parent .tri_content{
width:100%;
height:100%;
background:#FFF;
}
.tri_parent .tri{
position:absolute;
top:0;
right:-8px;
color:#09C;
}
</style>
<body>
<div class="tri_parent">
<div class="tri_content">
使用字符串实现三角形
</div>
<div class="tri">◆</div>
</div>
<style>
.tri_parent_css{
margin:40px;
position:relative;
width:200px;
height:200px;
padding:10px;
background:#09C;
}
.tri_parent_css .tri{
position:absolute;
width:0;
height:0;
right:-20px;
top:10px;
border:10px solid transparent;
border-left:10px solid #09C;
}
</style>
<div class="tri_parent_css">
使用CSS实现三角形
注意的是三角形的right是三角形的border的width度
<div class="tri">
</div>
</div>
</body>
</html>
天道酬勤
