如何使用 CSS 制作具有倾斜边框的 HTML 分隔线答案

【问题标题】：How to make HTML divider having slanted borders with CSS如何使用 CSS 制作具有倾斜边框的 HTML 分隔线
【发布时间】：2015-04-11 04:59:55
【问题描述】：

我正在尝试制作这个看起来很奇怪的分隔线：

.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 元素来制作分隔符。

【问题讨论】：

我会使用SVG 元素。这样一来，它就可以随网站扩展并始终保持美观。
这是个不错的选择。但是内容是通过 CMS 插入的，放置 hr 比放置 SVG 更容易。此外，我想看看我是否可以用 CSS 实现这一点。
老实说，我很震惊伪与<hr>...
:pseudo element with <hr> tag.. 从技术上讲它应该可以工作吗？我有疑问。
@Kheema Pandey：hr 在大多数地方都是作为替换元素实现的，所以可能不是。

标签： html css

【解决方案1】：

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

在这里您可以修改您的 sn-p，或者如果您更喜欢 FIDDLE

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

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

【讨论】：