Question

我正在尝试实现倾斜的左右边框，如下面的设计

我成功地实现了类似的东西，特别是屏幕尺寸为1360px的左右倾斜边框。不幸的是，当屏幕尺寸增大/减小时，左右边框确实搞乱了布局。有没有更好的方法来做到这一点，以便响应和边界保持在正确的位置？

以下是我目前编码布局的方式：

.f-col1 {
    width: 15%;
    float: left;
    position: relative;
    margin-top: -30px;
}
.f-col1::before {
    content: " ";
    width: 104%;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -ms-transform: rotate(22deg);
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
    margin-top: -8px;
}
.f-col2 {
    width: 70%;
    float: left;
    border-top: 1px solid #FFF;
    padding-top: 12px;
}
.f-col3 {
    width: 15%;
    float: left;
    text-align: right;
    position: relative;
    margin-top: -50px;
}
.f-col3::before {
    content: " ";
    width: 104%;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -ms-transform: rotate(-22deg);
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
    margin-top: 12px;
    margin-left: -4%;
}

我为它做了一个JSFiddle：
https://jsfiddle.net/btmxus6t/

此外，您可以在1360px中正确显示布局的实时链接，但在更改屏幕尺寸时会混乱：
http://revolutionarycoder.com/footer/index.html

Answer 1

您可以使用带标题的旋转伪元素：

＆＃13;

body {
  background: black;
  color: white;
  margin: 0;
}

h2 {
  box-shadow: inset 0 -1px 0 0 white;
  line-height: 4.5em;
  margin: 0 10em;
  position: relative;
  text-align: center;
}
h2:before, h2:after {
  bottom: 0;
  box-shadow: inherit;
  content: "";
  height: 1px;
  display: block;
  position: absolute;
  width: 10em;
}
h2:before {
  right: 100%;
  transform: rotate(20deg);
  transform-origin: right bottom;
}
h2:after {
  left: 100%;
  transform: rotate(-20deg);
  transform-origin: left bottom;
}

＆＃13;

<h2>Title</h2>

＆＃13;

Answer 2

如果您希望保持相同的HTML结构：

强制宽度保持不变，因此我们将确保元素的大小不会改变，包括静态顶部/左/右属性以强制它到位，边框的其余部分如果不是就会掉落neccesary。请注意，这是一个自定义解决方案，如果您决定更改内容，则不会非常响应。

.f-col1::before {
    content: " ";
    width: 260px;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: -20px;
    right: -10px;
    -ms-transform: rotate(22deg);
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
}

.f-col3::before {
    content: " ";
    width: 265px;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: -10px;
    top: 0;
    -ms-transform: rotate(-22deg);
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
}

如何使斜边框在不同的屏幕尺寸CSS3上保持正确的位置

2 个答案: