css - CSS，Flexbox，CSS Grid，Borders，用内部子 div 覆盖父边框

Question

我有这种情况：https ://jsfiddle.net/johnsam/L811uzey/

我需要用内容覆盖（覆盖）container边界triangle。

我怎样才能？

编码：

<div class="container">
  <div class="triangle">How are you ?</div>
</div>

.container {
  border: 1px solid gray;
  position: relative;
  width: 50vw;
  height: 100px;
  background: #fff;
  overflow: hidden;
}

.triangle {
  background-color: red;
  display: inline-block;
  transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
  transform-origin: center top;
  box-shadow: 0px -50px 0px 50px red;
}

Answer 1

您可以使用 abox-shadow作为边框。

.container {
  
  position: relative;
  width: 50vw;
  height: 100px;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px gray;
}

.triangle {
  background-color: red;
  display: inline-block;
  transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
  transform-origin: center top;
  box-shadow: 0px -50px 0px 50px red;
}

<div class="container">
  <div class="triangle">How are you ?</div>
</div>

Answer 2

您可以使用伪来执行此操作，然后简单地移动triangle负边距。

我也将它移到了overflow: hidden，triangle否则它不会覆盖边框。

请注意，我为该示例使用了较粗的边框，因此很容易看到它的工作原理

.container {
  border: 5px solid gray;
  position: relative;
  width: 50vw;
  height: 80px;
  background: #fff;
}
.triangle {
  display: inline-block;
  height: calc(100% + 10px);      /*  10px = border size * 2               */
  margin: -5px 0 0 -5px;          /*  move element left/top = border size  */
  width: 100%;
  overflow: hidden;
}
.triangle::before {
  content: attr(data-text);
  display: inline-block;
  background-color: red;
  transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
  transform-origin: center top;
  box-shadow: 0px -50px 0px 50px red;
}

<div class="container">
  <div class="triangle" data-text="How ?"></div>
</div>
<br>
<div class="container">
  <div class="triangle" data-text="How are you ?"></div>
</div>

如果你想要做的比使用伪能做的更多，你当然可以添加一个元素，这里用一个span

在这个示例中，我使用相对位置而不是负边距来展示另一种方式。

.container {
  border: 5px solid gray;
  position: relative;
  width: 50vw;
  height: 80px;
  background: #fff;
}
.triangle {
  display: inline-block;
  position: relative;
  left: -5px;                     /*  move element left = border size  */
  top: -5px;                      /*  move element top  = border size  */
  height: calc(100% + 10px);      /*  10px = border size * 2           */
  width: 100%;
  overflow: hidden;
}
.triangle span {
  display: inline-block;
  background-color: red;
  transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
  transform-origin: center top;
  box-shadow: 0px -50px 0px 50px red;
}

<div class="container">
  <div class="triangle">
    <span>How ?</span>
  </div>
</div>
<br>
<div class="container">
  <div class="triangle">
    <span>How are you ?</span>
  </div>
</div>