Question

我想用斜线分隔2个漂浮的div，它们有不同的背景颜色。

此处示例：

enter image description here

HTML标记：

<div id="wrap">
    <div id="one"></div>
    <div id="two"></div>
</div>

我已经尝试过旋转它们（正如你在jsFiddle中看到的那样）：

#wrap div {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    float:left;
    width:50%;
    height:200px;
}

http://jsfiddle.net/F6DgA/

我也试过smth。与overflow:hidden： http://jsfiddle.net/F6DgA/1/（部分相关，但不是非常干净的解决方案）

有没有更简单的方法（不要使用图像......）？

Answer 1

我个人会避免使用转换并使用border属性。这对我来说似乎更清晰（也适用于IE8）。

示例：http://jsfiddle.net/F6DgA/5/

注意：要确保div内的内容不会浮动在边缘上，请添加类似* { box-sizing:border-box; }的内容，然后向div / left /右边添加填充。 < / p>

CSS：

#wrap {
    width:300px;
    height:100px;
    margin:0 auto;
    position:relative;
}

#wrap div {
    position:relative;
    height:100%;
    float:left;
}

#one {
    background:#333;
    width:calc(50% + 15px);
}

#one:after {
    content:"";
    position:absolute;
    right:0;
    border-right:30px solid black;
    border-top:100px solid transparent;
}

#two {
    background:#000;
    width:calc(50% - 15px);
}

Answer 2

对#wrap div，check here for an example使用CSS渐变。

这样的事情：

background: #9dd53a;
background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 );

Answer 3

无论您的父级div的高度和宽度是多少，您都需要将子元素的高度加倍。之后，将position:absolute提供给您的子元素。给你的第一个孩子div留下-50％左边的位置，给你的第二个孩子div -50％正确的位置

CSS将如下：

#wrap {
    width:400px;
    margin:0 auto;
    position:relative;
    height:300px;
    overflow:hidden;
}

#wrap div {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    float:left;
    width:100%;
    height:600px;
    top:-50%;    
    position:absolute;
}
#wrap div#one { left:-50%; }
#wrap div#two { right:-50%; }

#one {
    background:#333;
}

#two {
    background:#000;
}

请检查此Working URL

Answer 4

<强> Demo

CSS

#one {
    border-top: 200px solid gray;
    border-right: 100px solid transparent;
    height: 0;
    width: 30%;
    float:left
}
#two {
    border-bottom: 200px solid black;
    border-left: 100px solid transparent;
    height: 0;
    width: 30%;
    float:left;
    margin-left:-100px;
}
#wrap {
    width:400px;
    margin:0 auto;
}

Answer 5

你可以使用伪元素：after或：before

CODEPEN

<div class="rect"></div>

.rect {
            background:#000;
            height: 50px;
            width: 150px;
            position: relative;
            overflow: hidden;
        }
        .rect:after {
            content: "";
            background:#333;
            height: 100px;
            width: 300px;
            -moz-transform: rotate(-45deg); 
            -ms-transform: rotate(-45deg); 
            -webkit-transform: rotate(-45deg); 
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            display: block;
            position: absolute;
            top:-7px;
            right: 10px;

        }

Answer 6

参考此css Shape examples！

这是我尝试过的。 Demo here！
这与您的需求不完全相同但我想，你可以通过一点修改来满足你的需求！

<强> HTML

<div Id="parallelogram"></div>
<div Id="parallelogram2"></div>

<强> CSS

 #parallelogram {
   width: 130px; 
   height: 75px;
   background: pink;
    position:absolute;
    overflow:hidden;
   /* Skew */
   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   transform: skew(-20deg);
}

#parallelogram2 {
   width: 130px; 
   height: 75px;
    margin-left:100px;
   background: Black;
    position:absolute;
    overflow:hidden;
   /* Skew */
   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   transform: skew(-20deg);
}

用斜率线分隔2个div

6 个答案: