自定义顶部边框宽度 css

Question

大家好，我想用 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 解决方案，但我遇到了同样的问题，我该如何解决这个问题？感谢回答

Answer 1

您可以使用以下方法删除底角的 border-radius。

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

Answer 2

您的解决方案将 border-radius 添加到左上角、右上角、左下角、右下角的所有角。

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

简单地选择特定的角落，例如： border-bottom-left-radius: 50px;

将只设置左下角半径，如下所示：

并减少对 UI 的不良影响。

自定义顶部边框宽度 css

Custom top border width with css

html

css

border

linear-gradients