CSS实现三角形

最新推荐文章于 2025-09-07 12:15:11 发布

转载最新推荐文章于 2025-09-07 12:15:11 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/strawer/archive/2010/12/30/1922265.html

文章标签：

#xhtml #php

本文介绍如何使用CSS实现一个带有三角形装饰的标题样式，该样式不依赖于图片资源，全部采用CSS代码完成，包括背景设置及特殊形状的创建。

代码

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

不用图片实现的效果

转载于:https://www.cnblogs.com/strawer/archive/2010/12/30/1922265.html