用斜线分隔 2 个 div答案

【问题标题】：Separate 2 div's with slope line用斜线分隔 2 个 div
【发布时间】：2014-07-16 22:25:40
【问题描述】：

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

这里的例子：

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/

我也试过了。与overflow:hidden： http://jsfiddle.net/F6DgA/1/（部分正确，但不是很干净的解决方案）

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

【问题讨论】：

您可以使用背景图片，也可以使用::before 和::after 隐藏并使div block 看起来像上图

标签： html css background css-shapes

【解决方案1】：

我个人会避免使用转换，而是使用边框属性。这对我来说似乎更干净（也适用于 IE8）。

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

注意：为确保 div 内的内容不会浮在边缘之上，请添加类似 * { box-sizing:border-box; } 的内容，然后在 div 中添加左/右填充。

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);
}

【讨论】：

谢谢，是的，你说得对！ - 这看起来更干净:)（也有响应）

【解决方案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 );

【讨论】：

好主意，但对我来说有点模糊：/

【解决方案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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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;

        }

【讨论】：

【解决方案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);
}

【讨论】：