Html5 边框-半径反向填充

Question

我想按照下面的设计图实现下拉按钮。查看下拉菜单在按钮中间后开始。我的问题是按钮具有透明背景以利用根父 div 中的背景图像。

到目前为止，我已经实现了下图。正如我上面所说，我想在 border-radius 之外实现白色边缘。

    .dropdown-header {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      width: 210px;
      height: 185px;
      margin: auto;
    }
    
    
    .div-user-header {
      width: 210px;
      margin: auto;
      position: relative;
    
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    
    }
    
    .div-user-header-1 {
      width: 206px;
      height: 24px;
      border: 2px solid #9CB2C7;
      border-radius: 20px;
      display: inline-block;
      text-align: center;
      padding-top: 5px;
    
    }
    
    .div-user-header-1 a {
      text-decoration: none;
      color: #FCCC00;
      display: block;
    
    }
    
    
    .div-user-header-list {
      position: absolute;
      background-color: white;
      height: 170px;
      width: 210px;
    
    
    }
    
    .div-user-header-2 a {
      text-decoration: none;
      font-size: 12px;
      color: #8C8C8C;
    }
    
    .div-user-header-2 {
      height: 40px;
      padding: 12px 15px;
    
    
    }
    
    .div-user-header-3 a {
      text-decoration: none;
      font-size: 12px;
      color: #8C8C8C;
    }
    
    .div-user-header-3 {
      height: 40px;
      padding: 12px 15px;
    
    }
    
    .div-add-profile-card {
    
      padding: 0px 15px;
    }
    
    .div-add-profile-card a {
      text-decoration: none;
      color: #8C8C8C;
      font-size: 10px;
      padding: 12px;
      display: block;
      border-top: 1px solid #D6D6D6;
    }

    <div class="dropdown-header">
        <div class="div-user-header">
          <div class="div-user-header-1">
            <a href="#profileuser01">ProfileUser 01</a>
          </div>
          <div class="div-user-header-list">
            <div class="div-user-header-2">
              <img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
              <a href="#profileuser02">ProfileUser 01</a>
            </div>
            <div class="div-user-header-3">
              <img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
              <a href="#profileuser03">ProfileUser 02</a>
            </div>
            <div class="div-add-profile-card">
              <a href="add profile card"> + Add Profile Cards</a>
            </div>
          </div>
        </div>

任何建议都会很有帮助。

Answer 1

为下拉菜单使用 ::after ::before 伪元素，并应用图像中标记的单独 background-image。应用 position:absolute 并根据设计在左上角和右上角对齐。