您的位置：首页 > Web前端 > CSS

CSS实现三角形

2010-12-30 16:42 239 查看

代码

<!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" />
<link rel="stylesheet" href="http://www.n1pay.com/templets/zhifu/style/reset.css" type="text/css" />
<title>无标题文档</title>
<style>
body{
background:url(http://bbs.blueidea.com/attachment.php?aid=157417&k=6d63e29bcfc152ef20fee8078c57a828&t=1293673644&noupdate=yes);
}
#wrap {
width:920px;
margin:0 auto;
padding:20px;
}
.box{
background:#FFFFFF;
padding-top:20px;
}
.box h2{
position:relative;
right:-16px;
height:48px;
background:#DD4C2D;
}
.sanjiao{
background:#fff;
height:16px;
position:relative;
}
.bor{
border-top:8px solid #A23919;
border-left:8px solid #A23919;
border-right:8px dashed transparent;
border-bottom:8px dashed transparent;
width:0px;
height:0px;
font-size:0px;
overflow:hidden;
position:absolute;
right:-16px;
top:-2px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<h2></h2>
<div class="sanjiao"><div class="bor"></div></div>
<div style="padding:0px 20px;">其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。其他的文字，其他的文字。</div>
</div>
</div>
</body>
</html>
不用图片实现的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航