如何创建不受边框半径影响的上直下边框

Question

我正在尝试复制 google 日历的设计，单击时它的文本输入框如下所示： https://ibb.co/6Hqrnt4

但我创建的内容如下所示： https://ibb.co/HprQ125

我的代码是这样的

.element{
  border-radius: 2px;
  border: none;
  border-bottom: 2px solid;
}

如您所见，我的底部边框在最后变得尖锐起来。 google 日历的对应物不是。我注意到底部边框并不完全适合原始灰色框（放大图像），但这并不重要。我怎样才能做到这一点？

Answer 1

我在手机上随便猜一下。可能按钮位于 div 内，具有底部边框和小边框半径

<div class=“blue-line”>
    <a href=“#” class=“grey-back”>
<\div>

Answer 2

您可以通过为新元素赋予蓝色边框来完成类似的操作。

.grey-box {
  width: 100px;
  height: 50px;
  display: block;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.blue-line {
   display: block;
   width: 100px;
   border-bottom: 5px solid blue;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

<div class="grey-box"></div>
<span class="blue-line"></span>

如何创建不受边框半径影响的上直下边框

How to create a upper-straight bottom border that is not affected by border radius

html

css

border