标题三角html5 css3制作

2012-07-04 00:00:00 by 【6yang】, 3063 visits, 收藏 | 返回

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

分享到:
share

    图片原图

    loading

    loading