1

由于声誉点，我无法上传图片，所以我试图解释一下。

我有 2 个 div，而不是需要被两条倾斜的线隔开，它们相互向下形成一个点。jsfiddle 会告诉你我的意思。

我试过这个解决方案：http: //jsfiddle.net/RZ4b8/7/

但是我不知道如何让它响应，因为值​​是为border-left-width属性设置的，并且只适用于特定的浏览器宽度。下面是代码；

.top-border { width: 100%; position: relative; left: 0; }
.top-border-left { border-top-width: 30px; border-right-width: 0; border-bottom-width: 0; border-left-width: 800px; border-color: transparent transparent transparent #ffffff; float: left; }
.top-border-left { border-style: solid solid inset solid; width: 0; height: 0; }
.top-border-right { border-top-width: 0; border-right-width: 0; border-bottom-width: 30p x; border-left-width: 800px; border-color: transparent transparent #ffffff transparent; float: right; }
.top-border-right { border-style: inset solid solid solid; width: 0; height: 0; }
4

1 回答 1

0

用于灵活三角框的 jQuery/CSS 解决方案

在最简单的情况下，从这个HTML开始：

<div class="div1">text 1</div>
<div class="top-border">
    <div class="inner"></div>
</div>
<div class="div2">text 2</div>

并应用此CSS：

.div1 {
    background: purple;
    height: 50px;
}
.div2 {
    background: red;
    height: 50px;
}
.top-border {
    overflow: hidden;
}
.top-border .inner {
    width: 0;
    height: 0;
    border-top: 50px solid lightgray; /* controls the height of the triangle */
    border-left: 100px solid transparent; /* these default values are reset 
                                             by the jQuery script */
    border-right: 100px solid transparent;
    border-bottom: none;
    margin: 0 auto;
}

并使用以下jQuery脚本设置正确的边框宽度：

function setTriangleWidth() {
    var baseWidth = $(".top-border").width() / 2.0;

    $(".top-border .inner").css({
        "border-left-width": baseWidth + "px",
            "border-right-width": baseWidth + "px"
    });
}

$(window).resize(function(){setTriangleWidth();});

$(document).ready(setTriangleWidth())

演示小提琴：http: //jsfiddle.net/audetwebdesign/Gs2pc/

这说明了基本概念。如果您希望三角形与红色文本框重叠，则可以使用绝对定位或负边距，例如：

.div2.ex2 {
    margin-top: -50px;
    position: relative;
    z-index: -1;
    padding-top: 50px;
}
于 2013-08-26T17:20:30.623 回答