堆棧內存溢出
  簡體   English   中英

HTML5邊界半徑反向填充

[英]Html5 Border-Radius Reverse Fill

 原文  2018-12-27 06:14:33  1   4    html/ css/ html5/ css3

問題描述

我想按照以下設計圖片實現下拉按鈕。 請參閱下拉菜單，僅在按鈕中間之后才開始。 我的問題是按鈕具有透明背景，以利用根父div的背景圖像。

在此處輸入圖片說明

到目前為止，我已經實現了以下圖像。 就像我上面說的，我想在邊界半徑之外獲得白色邊緣。

在此處輸入圖片說明 

  .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>

任何建議都會很有幫助。

4 個解決方案

解決方案1
 1 已采納  2018-12-27 06:32:36

在此處輸入圖片說明

::before偽元素中使用::after ::before下拉菜單，並應用background-image中標記的單獨的background-image圖像。 應用position:absolute根據設計，然后在左上角和右上角position:absolute對齊。

解決方案2
 1  2018-12-27 06:34:47

非常簡單 您已經達到了將近99％。 只需將以下樣式添加到.div-user-header-list CSS中，如下所示： 

.div-user-header-list {
    position: absolute;
    background-color: white;
    height: 170px;
    width: 210px;
    padding-top: 20px;
    margin-top: -20px;
    z-index: -1;
}

請在此處查看更新的小提琴： https : //jsfiddle.net/8ukj3wy1/1/

解決方案3
 0  2018-12-27 07:05:58

看看這個： 在此處輸入圖片說明 https://jsfiddle.net/sLy7fnzg/

本質上，請使用負邊距將.div-user-header-list向上移動，並使用相對位置來啟用z- .div-user-header-list 。

另外，要解決半邊框問題，請從.div-user-header-1刪除邊框，然后將整個元素作為::before到.div-user-header如下所示： 

.div-user-header::before {
    content: "";
    background: #9CB2C7;
    width: 210px;
    height: 30px;
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    z-index: 1;
}

解決方案4
 -2  2018-12-27 07:44:53

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <style>
    body{
        background-color: grey;
    }
        .dropdown-header {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      width: 210px;
      height: 203px;
      margin: auto;
      overflow: hidden;
      /*background-color: #fff;*/
    }

    .div-user-header-list:before,
    .div-user-header-list:after {
        content: "";
        position: absolute;

        height: 10px;
        width: 20px;

        bottom: 0;
    }
        .div-user-header-list:before {
        /*right: -20px;*/
        left: 1px;
        top: -10px;
        border-radius: 0 0 0 10px;
        -moz-border-radius: 0 0 0 10px;
        -webkit-border-radius: 0 0 0 10px;

        -webkit-box-shadow: -10px 0 0 0 #fff;
        box-shadow: -10px 0 0 0 #fff;
    }

    .div-user-header-list:after {
        /*left: -20px;*/
        right: 1px;
        top: -10px;
        border-radius: 0 0 10px 0;
        -moz-border-radius: 0 0 10px 0;
        -webkit-border-radius: 0 0 10px 0;

        -webkit-box-shadow: 10px 0 0 0 #fff;
        box-shadow: 10px 0 0 0 #fff;
    }
    .div-user-header {
      width: 210px;
      margin: auto;
      position: relative;

      border-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;
        /*margin-top: -14px;
    z-index: -9;
    padding-top: 14px;*/

    }

    .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;
    }   


    </style>

</head>    

<body>

<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>
</body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 帶邊框半徑的 HTML5 和 CSS 標題視頻 IE9反向CSS中的邊界半徑 IE中注入HTML的CSS邊界半徑 Html 背景顏色在邊框半徑后面 html/css 表格中的邊框半徑 如何在 HTML 中實現邊框半徑 邊界半徑和圖像 帶分割的邊界半徑 圖像邊界半徑 具有邊界半徑但沒有邊界的 DIV
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM