技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
标题三角html5 css3制作
<!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>