标题三角html5 css3制作
点击次数: 6129
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三角形叠加</title>
<style type="text/css">
<!--
.box{
font-size:0.625em;
overflow:hidden;
background:#339900;
}
.box .box-title{
position:relative;
}
.box .box-title .title{
border:1px solid #cbcbcb;
background-color:#f8f6f5;
height:18px;
padding:4px 5px;
}
.box_arrow {
position:absolute;
left:15px;
bottom:0px;
}
.box_arrow:before{
content:"";
display:block;
border-width:9px 9px 0 9px ;
border-color:rgba(203,203,203,1) transparent transparent transparent ;
-moz-border-top-colors:rgba(203,203,203,0.1) ;
border-style:solid;
position:absolute;
left:0;
top:-1px;
width:0;
height:0;
}
.box_arrow:after {
content:"";
display:block;
border-width:8px 8px 0 8px ;
border-color:rgba(248,246,245,1) transparent transparent transparent ;
border-style:solid;
position:absolute;
left:1px;
top:-1px;
width:0;
height:0;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="box-title">
<h2 class="title">Title</h2>
<div class="box_arrow"></div>
</div>
</div>
</body>
</html>