.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之間顯示的灰線,但不知道如何去做。
你的意思是你不需要只在箭頭部分下面的灰線? –
是的,喜歡我想要的 –