Css 剃须刀-添加Mindle 1

我有这样的东西：

2 div的剃须刀形状。但我无法添加中间的一个。有人能帮忙吗

<div class="rr rr-left">
<div>
  <h2>rr-left div</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>

<div class="rr rr-right">
<div>
  <h2>rr-right div</h2>
  <p>Lorem ipsum dolor sit amet, dolore eu feugiat facilisis.</p>
</div>

---

我在中间加了切口有问题。看起来我只能从一侧添加它…

您可以使用

transform:translateY（-50%）

这有什么帮助？代码笔的效果是一样的吗？或者我遗漏了什么？@susanoo我更新了我的答案，再次检查。我给它们添加了供应商前缀说实话，我看不出在工作中有什么不同。如果我再添加一个div，它仍然没有边缘。@susano你能发布一张显示你的问题的图片吗？没错。但是我不知道如何在中间的矩形上增加斜边。
    @import "compass/css3";

/*==========  Variables  ==========*/

$pg-bg:             #dcdcdc;
$rr-bg:             #232E39;
$rr-bg-hover:       darken($rr-bg, 10%);

$rr-height:         200px;
$rr-slant:          100px;
$rr-gutter:         1%;
$rr-width:          50%;


/*==========  Styles  ==========*/

// Scaffolding
body {
    background-color: $pg-bg;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: lighten($rr-bg, 40%);
}
h2 { text-transform: uppercase; }
.rr > div { text-align: center; }

// Construct the rectangles
.rr {
    position: relative;
    height: $rr-height;
    background: $rr-bg;
    &.rr-left {
        z-index: 1;
        float: left;
        width: $rr-width + 5%; // + 5% adjustment for slant offset
    }
    &.rr-right {
        z-index: 2;
        float: right;
        width: $rr-width - $rr-gutter - 5%; // - 5% adjustment for slant offset
    }
}

// Add slanted edges
.rr:after,
.rr:before {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}
.rr-left:after {
    right: 0;
    border-left: $rr-slant solid $rr-bg;
    border-bottom: $rr-height solid $pg-bg;
}
.rr-right:before {
    left: -$rr-slant;
    border-right: $rr-slant solid $rr-bg;
    border-top: $rr-height solid rgba(0, 0, 0, 0); // overlaps .rr-left
}

// Add padding around inner content
.rr-left > div {
    margin-right: $rr-slant;
    margin-left: $rr-slant/2;
}
.rr-right > div {
    margin-right: $rr-slant/2;
    margin-left: $rr-slant/4;
}
// Hover styles
.rr:hover { background: $rr-bg-hover; }
.rr-left:hover:after { border-left-color: $rr-bg-hover; }
.rr-right:hover:before { border-right-color: $rr-bg-hover; }

.rr > div {
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  transform: translateY(-50%);
}