css - Razorblade divs - 添加中间一个

Question

我有这样的东西:codepen .

2 div 的 Blade 形状。但是我无法添加中间一个。谁能帮忙？

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

和 SCSS:

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

我在中间添加剪辑时遇到问题。看起来我只能从一侧添加它...

Answer 1

您可以使用transform: translateY(-50%);

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

Codepen