Html 为什么会有一个灰色的“；酒吧；在我的<；img>；及<；部门>；

---

看起来你想在你的div上做一个斜顶。
您可能喜欢另一种没有SVG的方法。
使用

边框图像

：

正文{
背景：#15100e
}
.标题容器{
显示器：flex；
宽度：100%；
证明内容：中心；
背景色：白色；
背景剪辑：填充框；
填充顶部：10px；
边框顶部：实心50px；
边框图像：线性渐变（至右下角，透明计算（50%-1.5px），#fff 50%）100%0/50px 0
}

---

看起来你想在你的div上做一个斜顶。
您可能喜欢另一种没有SVG的方法。
使用

边框图像

：

正文{
背景：#15100e
}
.标题容器{
显示器：flex；
宽度：100%；
证明内容：中心；
背景色：白色；
背景剪辑：填充框；
填充顶部：10px；
边框顶部：实心50px；
边框图像：线性渐变（至右下角，透明计算（50%-1.5px），#fff 50%）100%0/50px 0
}

---

@Kosh解决方案非常有效，非常感谢他

我找到的解决方案是使用svg作为边框图像

代码如下：

.title容器{
显示器：flex；
宽度：100%；
证明内容：中心；
背景色：$白色；
背景剪辑：填充框；
填充顶部：10px；
边框顶部：实心100px；
边框图像：
url（'http://fitnesslab20.local/assets/oblique.svg")100发;；
}

---

@Kosh解决方案非常有效，非常感谢他

我找到的解决方案是使用svg作为边框图像

代码如下：

.title容器{
显示器：flex；
宽度：100%；
证明内容：中心；
背景色：$白色；
背景剪辑：填充框；
填充顶部：10px；
边框顶部：实心100px；
边框图像：
url（'http://fitnesslab20.local/assets/oblique.svg")100发;；
}

猜测正在缩放SVG。亚像素渲染使SVG的边缘半不透明。我想您可以在

.svg

元素上尝试

margin-bottom:-1px

。在html中，它应该是

class

，而不是

className

。因为它来自react项目，所以有一个书面的className。我的错，我应该用classNote更改。

标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。我用svg尝试过你的代码，我不明白你的问题。您能否编辑您的问题并添加您拥有的svg？猜测您的svg正在缩放。亚像素渲染使SVG的边缘半不透明。我想您可以在

.svg

元素上尝试

margin-bottom:-1px

。在html中，它应该是

class

，而不是

className

。因为它来自react项目，所以有一个书面的className。我的错，我应该用classNote更改。

标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。我用svg尝试过你的代码，我不明白你的问题。你能编辑你的问题并添加你的svg吗？我刚刚尝试过，谢谢你的建议，但它给了我一个溢出，就像我的问题中的第二个屏幕截图一样。@bruhurb，我已经更新了我的答案，使之更加像素完美。非常感谢，但我找到了一个更适合的简短解决方案，如果你想读的话，我会把它放在我的问题里it@bruhurb，您可以将您的解决方案作为答案发布。我刚刚尝试过，谢谢您的建议，但它给了我一个溢出，如我问题中的第二个屏幕截图所示。@bruhurb，我已将我的答案更新为更完美的像素。非常感谢，但我找到了一个非常适合的较短的解决方案，如果您愿意阅读，我会把它放在我的问题中it@bruhurb，您可以将您的解决方案作为答案发布。