购物车项目列表下拉箭头

Question

.bagitem-main { 
 
    margin: 0 auto; 
 
    position: relative; 
 
    min-width: 10px; 
 
    max-width: 1260px; 
 
    direction: rtl; 
 
    background-color: green; 
 
} 
 

 
.bagitem-box { 
 
    position: absolute; 
 
    width: 290px; 
 
    direction: ltr; 
 
    background-color: white; 
 
    border-radius: 2px; 
 
    border: 1px solid #d6d6d6; 
 
    pointer-events: auto; 
 
    display: block; 
 
    top: 4px; 
 
    left: 0; 
 
} 
 

 
.bagitem-arrow { 
 
    opacity: 1.0; 
 
    position: absolute; 
 
    background: #ffffff; 
 
    margin-left: 19px; 
 
    margin-top: 5px; 
 
} 
 

 
.bagitem-arrow::after, 
 
.bagitem-arrow::before { 
 
    opacity: 1.0; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.bagitem-arrow::after { 
 
    opacity: 1.0; 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-bottom-color: #ffffff; 
 
    border-width: 10px; 
 
    margin-left: -10px; 
 
} 
 

 
.bagitem-arrow::before { 
 
    opacity: 1.0; 
 
    border-color: rgba(214, 214, 214, 0); 
 
    border-bottom-color: #d6d6d6; 
 
    border-width: 11px; 
 
    margin-left: -11px; 
 
}

<div class="bagitem-arrow" id="bagitem-arrow"></div> 
 
<div class="bagitem-main"> 
 
    <div class="bagitem-box"> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    </div> 
 
</div>

我开发一个购物车的HTML网页。并在该网站，我需要onclick购物车项目下拉列表。在那个下拉我需要这个箭头和一个div 单独的。我试图删除箭头和div之间显示的灰线，但不知道如何去做。

Answer 1

试试这个代码 的类.bagitem-arrow::after

.bagitem-main { 
 
    \t 
 
    \t margin: 0 auto; 
 
    \t position: relative; 
 
    \t min-width: 10px; 
 
    \t max-width: 1260px; 
 
    \t direction: rtl; 
 
    \t background-color: green; 
 
    } 
 

 

 

 

 
    .bagitem-box { 
 
    \t 
 
    
 
    \t position: absolute; 
 
    \t width: 290px; 
 
    \t direction: ltr; 
 
    \t background-color: white; 
 
    \t border-radius: 2px; 
 
    \t border: 1px solid #d6d6d6; 
 
    \t pointer-events: auto; 
 
    \t display: block; 
 
     top: 4px; 
 
     left: 0; 
 
    \t 
 
    } 
 

 
    .bagitem-arrow { 
 
    \t opacity: 1.0; 
 
    \t position: absolute; 
 
    \t background: #ffffff; 
 
    \t margin-left: 19px; 
 
    \t margin-top: 5px; 
 
    \t 
 
    } 
 
    .bagitem-arrow::after, .bagitem-arrow::before { 
 
    \t opacity: 1.0; 
 
     \t bottom: 100%; 
 
    \t left: 50%; 
 
     \t border: solid transparent; 
 
    \t content: " "; 
 
    \t height: 0; 
 
    \t width: 0; 
 
    \t position: absolute; 
 
    \t pointer-events: none; 
 
    } 
 

 
    .bagitem-arrow::after { 
 
    \t \t opacity: 1.0; 
 
    \t border-color: rgba(255, 255, 255, 0); 
 
    \t border-bottom-color: #ffffff; 
 
    \t border-width: 10px; 
 
    \t margin-left: -10px; 
 
     z-index:1; 
 
    } 
 
    .bagitem-arrow::before { 
 
    \t opacity: 1.0; 
 
    \t border-color: rgba(214, 214, 214, 0); 
 
    \t border-bottom-color: #d6d6d6; 
 
    \t border-width: 11px; 
 
    \t margin-left: -11px; 
 
    }

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 2

这是因为你已经添加border-color前为灰色添加z-index:1;在bagitem-arrow之后。如果你不想灰色border，然后将z-index:1添加到你的bagitem-arrow类。试试下面的代码片段：

.bagitem-main { 
 
\t margin: 0 auto; 
 
\t position: relative; 
 
\t min-width: 10px; 
 
\t max-width: 1260px; 
 
\t direction: rtl; 
 
\t background-color: green; 
 
} 
 

 
.bagitem-box { 
 
\t position: absolute; 
 
\t width: 290px; 
 
\t direction: ltr; 
 
\t background-color: white; 
 
\t border-radius: 2px; 
 
\t border: 1px solid #d6d6d6; 
 
\t pointer-events: auto; 
 
\t display: block; 
 
    top: 4px; 
 
    left: 0; 
 
} 
 

 
.bagitem-arrow { 
 
\t opacity: 1.0; 
 
\t position: absolute; 
 
\t background: #ffffff; 
 
\t margin-left: 19px; 
 
\t margin-top: 5px; 
 
    z-index: 1; /* Add z-index to your arrow */ 
 
} 
 

 
.bagitem-arrow::after, .bagitem-arrow::before { 
 
\t opacity: 1.0; 
 
\t bottom: 100%; 
 
\t left: 50%;  \t 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
} 
 

 
.bagitem-arrow::after { 
 
\t opacity: 1.0; 
 
\t border-color: rgba(255, 255, 255, 0); 
 
\t border-bottom-color: #ffffff; 
 
\t border-width: 10px; 
 
\t margin-left: -10px; 
 
} 
 

 
.bagitem-arrow::before { 
 
\t opacity: 1.0; 
 
\t border-color: rgba(214, 214, 214, 0); 
 
\t border-bottom-color: #d6d6d6; 
 
\t border-width: 11px; 
 
\t margin-left: -11px; 
 
}

<div class="bagitem-arrow" id="bagitem-arrow"></div> 
 
<div class="bagitem-main">   \t 
 
    <div class="bagitem-box">   \t \t 
 
     <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
     <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
     <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
     <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
     <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
     <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    </div> 
 
</div>

Answer 3

添加z-index: 1;它获取的箭头前面。添加filter: drop-shadow(rgba(0, 0, 0, 1) 0px 0px 0px);以获得箭头的边框。并更改border-bottom-color: #ffffff;以匹配背景。 Check this fiddle

.bagitem-main { 
 
    margin: 0 auto; 
 
    position: relative; 
 
    min-width: 10px; 
 
    max-width: 1260px; 
 
    direction: rtl; 
 
    background-color: green; 
 
} 
 

 
.bagitem-box { 
 
    position: absolute; 
 
    width: 290px; 
 
    direction: ltr; 
 
    background-color: white; 
 
    border-radius: 2px; 
 
    border: 1px solid #d6d6d6; 
 
    pointer-events: auto; 
 
    display: block; 
 
    top: 4px; 
 
    left: 0; 
 
} 
 

 
.bagitem-arrow { 
 
    opacity: 1.0; 
 
    position: absolute; 
 
    background: #ffffff; 
 
    margin-left: 19px; 
 
    margin-top: 5px; 
 
} 
 

 
.bagitem-arrow::after, 
 
.bagitem-arrow::before { 
 
    opacity: 1.0; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.bagitem-arrow::after { 
 
    opacity: 1.0; 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-bottom-color: #ffffff; 
 
    border-width: 10px; 
 
    margin-left: -10px; 
 
} 
 

 
.bagitem-arrow::before { 
 
    opacity: 1.0; 
 
    border-color: rgba(214, 214, 214, 0); 
 
    border-bottom-color: #ffffff; 
 
    border-width: 11px; 
 
    margin-left: -11px; 
 
    z-index: 1; 
 
    filter: drop-shadow(rgba(0, 0, 0, 1) 0px 0px 0px); 
 
    -webkit-filter: drop-shadow(rgba(0, 0, 0, 1) 0px 0px 0px); 
 
}

<div class="bagitem-arrow" id="bagitem-arrow"></div> 
 
<div class="bagitem-main"> 
 
    <div class="bagitem-box"> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    <p>hi hi hi hi h i ih ih i hi hi h ih ih ih i hi hihi h ih ih i hi hi hi </p> 
 
    </div> 
 
</div>

Answer 4

有一个类从代码片段丢失：
.bagitem盒
删除边框属性，你是好。