Question

我正试图让这个看起来很奇怪的分隔符：

.jumbotron {
  background-color: rgba(0, 52, 113, 0.6);
  padding: 2em 0;
}
.jumbotron hr {
  position: relative;
  background-color: white;
  border: none;
}
.jumbotron hr:before,
.jumbotron hr:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 1px;
  border-bottom: 1em solid white;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.jumbotron hr:before {
  top: 0;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
.jumbotron hr:after {
  bottom: 0;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.grid {
  display: table;
  vertical-align: middle;
  border-spacing: 2.46153846em 0;
}
.grid > * {
  display: table-cell;
}

<div class="jumbotron">
  <div class="grid">
    <div>
      <h1>This is a headline</h1>
    </div>

    <hr />

    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem reprehenderit sit quasi, animi id.</p>
    </div>
  </div>
</div>

不使用图片的原因是因为它是针对响应式网站的。由于间距table-cell给出，我无法使用额外的元素。

现在它看起来像我想要的那样，它仍然在:before之下和:after之上有额外的间隙。我相信我并没有这么做。

我的问题是，是否有其他方法可以使该分隔符仅包含hr元素。

Answer 1

嗯，我认为它更完美（只要我已经缩放）使用几个正方形作为之前和之后，给它们边界左，旋转它们45度。并以正确的方式使用transform-origin。

此处您修改了代码段，或者您希望 FIDDLE

＆＃13;

 .jumbotron {
    background-color: rgba(0, 52, 113, 0.6);
    padding: 2em 0;
    }    
.jumbotron hr {
    position: relative;
    background-color: white;
    border: none;
    }
.jumbotron hr:before,
.jumbotron hr:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0px;
    border-left: 1px solid #fff;
    }
.jumbotron hr:before {
    top: -20px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin:left bottom;
    transform-origin: left bottom;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }
.jumbotron hr:after {
    bottom: -20px;
    -webkit-transform-origin: left top;
    -ms-transform-origin:left top;
    transform-origin: left top;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }
.grid {
    display: table;
    vertical-align: middle;
    border-spacing: 2.46153846em 0;
    }
.grid > * {
    display: table-cell;
    }

＆＃13;

   <div class="jumbotron">
  <div class="grid">
    <div>
      <h1>This is a headline</h1>
    </div>

    <hr />

    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem reprehenderit sit quasi, animi id.</p>
    </div>
  </div>
</div>

＆＃13;

如何使HTML分割器与CSS倾斜的边界

1 个答案: