內部div是不可見的梯形形狀的div

Question

我想在梯形形狀的div內設置div。
但內心的div無論如何都是看不見的。
我也試過z-indexes。

.trapezoid 
 
{ 
 
    border-color: transparent transparent rgba(255,0,0,0.2) transparent; 
 
    border-width: 0px 10px 38px 10px; 
 
    border-style: solid; 
 
    height: 0; 
 
    width: 40px; 
 
    background-size: 430px; 
 
    overflow: hidden; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    text-indent: -99999px; 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
    margin-left: 25px; 
 
    margin-right: 25px; 
 
    cursor: pointer; 
 
} 
 
.innerIcon 
 
{ 
 
    width: 100%; 
 
    height: 38px; 
 
    border-radius: 16px; 
 
    background-color: rgba(0,0,0,0.4); 
 
}

<div class="trapezoid" title="Fire Range Down"> 
 
    \t <!-- This inner div is invisible --> 
 
\t <div class="innerIcon"></div> 
 
</div>

請給我一些解決方案。

Answer 1

的梯形是由只是邊境，因此它不具有高度（高度：在CSS中指定0像素）。所以overflow:hidden是導致問題被刪除。設置position:absolute到內部分區和postion:relative到梯形將做的伎倆。

下面是更新後的代碼：

.trapezoid { 
 
    border-color: transparent transparent rgba(255, 0, 0, 0.2) transparent; 
 
    border-width: 0px 10px 38px 10px; 
 
    border-style: solid; 
 
    height: 0; 
 
    width: 40px; 
 
    background-size: 430px; 
 
    /*overflow: hidden;*/ 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    text-indent: -99999px; 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
    margin-left: 25px; 
 
    margin-right: 25px; 
 
    cursor: pointer; 
 
    /*New Css */ 
 
    position: relative; 
 
} 
 

 
.innerIcon { 
 
    width: 100%; 
 
    height: 38px; 
 
    border-radius: 16px; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    position: absolute; 
 
    top: 0px; 
 
}

<div class="trapezoid" title="Fire Range Down"> 
 
    <!-- This inner div is invisible --> 
 
    <div class="innerIcon"></div> 
 
</div>

Answer 2

試試這個CSS

.innerIcon 
    { 
     position: absolute; 
     width: 39px; 
     height: 38px; 
     border-radius: 16px; 
     background-color: rgba(0,0,0,0.4); 
    }