使用css自定义顶部边框宽度答案

【问题标题】：Custom top border width with css使用css自定义顶部边框宽度
【发布时间】：2021-11-20 19:22:44
【问题描述】：

大家好，我想用 css 制作自定义顶部边框，但交叉线不直，如下所示：

这是我的 CSS 规则：

 border-radius: 4px;
  background-image: linear-gradient(to left, transparent 115px, #b0b0b0 -10px);
  border-right: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
  border-left: 1px solid #b0b0b0;
  background-position: 100% 0, 100% 0, 0 100%, 0 100%;
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;

我打算让问题更容易理解的设计如下图所示。

我尝试了一些 ::after ， ::before 解决方案，但我遇到了同样的问题，我该如何解决？谢谢解答

【问题讨论】：

标签： html css border linear-gradients

【解决方案1】：

您的解决方案将边框半径添加到左上角、右上角、左下角、右下角的所有角。

而不是设置边框半径：4px；

只需使用特定的角落，例如：左下边框半径：50px；

只会像这里一样设置左下角半径：

并减少 UI 中不需要的效果。

【讨论】：

感谢提示我不知道可以给指定角的边框。

【解决方案2】：

您可以使用以下内容删除底角的border-radius。

border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

【讨论】：

与 Krzysztof Wyrzykowski 解决方案相同，我非常感谢他的回答。