CSS、Flexbox、CSS 网格、边框、用内部子元素覆盖父边框 div

Question

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

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

我能怎样？

代码：

<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

您可以使用 box-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>

CSS、Flexbox、CSS 网格、边框、用内部子元素覆盖父边框 div

CSS, Flexbox, CSS Grid, Borders, overwrite parent border by inside child div

css

flexbox

border

css-grid