HTML/CSS - 块内绝对位置，边框 100% 宽度

Question

我在其父级中绝对有一个块位置。父母有一个左右边框。这会导致绝对定位的块（也有边框）太小了2px。

解决此问题的最佳方法是什么？

目标： 我基本上希望这两个块对齐。它们的边界基本上应该看起来像 1 个边界。问题是即使使用border-box，子 div 也更小，因此无法对齐。

html

<div class="container">
    <div class="diagonal"></div>
</div>

css

* {
  box-sizing: border-box;
}
body {
    background-color:red;
}

    .container {
        width:1170px;
        margin:0 auto;
        margin-top:200px;
        height:700px;
        position:relative;
        z-index:3;
        background-color:white;
        border-style:solid;
        border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
        border-width:0 1px 1px 1px;
    }

    .diagonal {
        width:100%;
        height:400px;
        transform:skewY(-10deg);
        position:absolute;
        top:-200px;
        left:0;
        background-color:white;
        border-style:solid;
        border-color:transparent #D2D8DE;
        border-width:0 1px;
        z-index:-1;
    }

JSFiddle

Answer 1

我想你正在寻找这个：

* {
  box-sizing: border-box;
}

此属性tells the browser to account for any border and padding in the value you specify for width and height

编辑：

如果您想为内部和外部 div 设置不同的边框并且希望它们对齐，则设置 .diagonal{ left:-1px; } 其中 1px 是内部 div 边框的宽度。 我更改了宽度和颜色，以便更容易注意到结果。注意：在这种情况下你不需要box-sizing: border-box;

body {
  background-color: red;
}

.container {
  width: 1170px;
  margin: 0 auto;
  margin-top: 200px;
  height: 700px;
  position: relative;
  z-index: 3;
  background-color: white;
  border-style: solid;
  border-color: transparent black black black;
  border-width: 0 3px 3px 3px;
}

.diagonal {
  width: 100%;
  height: 400px;
  transform: skewY(-10deg);
  position: absolute;
  top: -200px;
  left: -3px;
  background-color: white;
  border-style: solid;
  border-color: transparent blue;
  border-width: 0 3px;
  z-index: -1;
}

<div class="container">
  <div class="diagonal"></div>
</div>