CSS、Flexbox、CSS网格、边框、通过内部子div覆盖父边框

我有这样的情况：

我需要用

三角形

内容覆盖（覆盖）容器的边框

我该怎么办

守则：

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

你好吗
.集装箱{
边框：1px纯色灰色；
位置：相对位置；
宽度：50vw；
高度：100px；
背景：#fff；
溢出：隐藏；
}
.三角形{
背景色：红色；
显示：内联块；
变换：translateX（-50%）旋转（45度）translateX（50%）旋转（-90度）；
变换原点：中心-顶部；
盒影：0px-50px 0px 50px红色；
}

---

您可以使用

框阴影作为边框


.container{
位置：相对位置；
宽度：50vw；
高度：100px；
背景：#fff；
溢出：隐藏；
框阴影：嵌入0 1px灰色；
}
.三角形{
背景色：红色；
显示：内联块；
变换：translateX（-50%）旋转（45度）translateX（50%）旋转（-90度）；
变换原点：中心-顶部；
盒影：0px-50px 0px 50px红色；
}

你好吗
您可以使用一个伪函数来完成此操作，然后只需移动带有负边距的
三角形

我还将
溢出：隐藏
移动到
三角形
，否则它不会覆盖边框

注意，我在这个示例中使用了更厚的边框，因此可以很容易地看到它的工作原理


.container{
边框：5px纯灰；
位置：相对位置；
宽度：50vw；
高度：80px；
背景：#fff；
}
.三角形{
显示：内联块；
高度：计算（100%+10px）；/*10px=边框尺寸*2*/
边距：-5px 0-5px；/*向左/向上移动元素=边框大小*/
宽度：100%；
溢出：隐藏；
}
.三角形：：之前{
内容：attr（数据文本）；
显示：内联块；
背景色：红色；
变换：translateX（-50%）旋转（45度）translateX（50%）旋转（-90度）；
变换原点：中心-顶部；
盒影：0px-50px 0px 50px红色；
}



使用框阴影也可以绘制边框我正在使用引导元素，我不想用边框覆盖每个元素。有关于border的解决方案吗？谢谢@GCyrillus，这是border的引导和我的问题：（用Chrome打开）。好吧，这不是我所期望的，但仍然帮助我看到了一些东西。也许，这样做的目的是避免溢出（或相对溢出），并将角点绘制到背景中。哦，天哪，我不喜欢这个解决方案。你看到这个截图上的白线了吗？太恐怖了！我使用的是引导元素，我不想用边框覆盖每个元素。有边界的解决方案吗？@JohnSam我认为你不能用你的标记。您可以为边框引入另一个元素。谢谢你的回答，@LGSon，但是当div很小的时候，我有一个奇怪的情况：为什么三角形的底部有一个边框？@JohnSam你试图让一个文本适合它不适合的地方，所以它看起来当然会很奇怪。你能发布一个图像的外观吗？@JohnSam还有一件事，如果你想让它分成两行，你需要手动设置，因为实际的文本元素不知道它应该适合那个可见的三角形，它仍然是一个正方形，但旋转使它看起来像它not@JohnSam更新了我的答案。要修复您所做的
高度：计算（100%+10px）因此它也将重叠底部边框（10px是边框大小的2倍）@JohnSam在引导中，您需要设置
文本对齐：左在<代码>我的btn上
和<代码>宽度：100%
在<代码>三角形上
。。。