标签:山顶角
<!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=utf-8" />
<title>Border</title>
<style type="text/css">
body {
background-color: #CCC;
}
div.root {
position: relative;
}
div.dot1,
div.dot2,
div.dot3,
div.dot4 {
height: 0px;
width: 0px;
border-width: 20px;
border-style: solid;
border-color: #666 transparent transparent transparent;
overflow: hidden;
}
div.dot2 {
border-color: #CCC transparent transparent transparent;
top: -5px;
position: absolute;
}
div.dot3 {
border-style: solid;
border-color: #666 #666 transparent transparent;
}
div.dot4 {
border-width: 20px 10px;
border-style: solid;
border-color: #CCC #CCC transparent transparent;
position: absolute;
top: 0px;
left: 20px;
}
</style>
</head>
<body>
<div class="root">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
<div class="root">
<div class="dot3"></div>
<div class="dot4"></div>
</div>
</body>
</html>
详情查看http://www.jsann.com/post/CSS_to_achieve_the_principle_of_the_Peak_Point.html
标签:山顶角
原文地址:http://blog.csdn.net/u012011360/article/details/43952115