CSS圓形面具

Question

我期待在主圓圈中包含的圓的底部創建一個黑色面具。

你能用css掩碼做這個嗎？

請參閱fiddle

<div id="profile-pic-wrap"> 
    <div id="profile-pic"> 
    <div class="profile-btn-bg"> 
     <a href="#" class="profile-pic-btn">Change Profile</a> 
    </div> 
    </div> 
</div> 

感謝

Answer 1

您可以使用overflow:hidden;：

DEMO

更改您CSS：添加overflow:hidden;和text-align:center到​​

#profile-pic { 
 
\t position: absolute; 
 
\t z-index: 999; 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t left: 33px; 
 
\t background: #FFF; 
 
\t border: 3px solid #FFF; 
 
\t border-radius: 100px; 
 
\t -webkit-border-radius: 100px; 
 
\t -moz-border-radius: 100px; 
 
\t top: 0px; 
 
\t position: relative; 
 
    background:red; 
 
    overflow:hidden; 
 
    text-align:center; 
 
} 
 
.profile-btn-bg{ 
 
\t position: absolute; 
 
\t background-color: black; 
 
\t width: 100%; 
 
\t height: 30%; 
 
\t bottom: 0px; 
 
} 
 

 
a.profile-pic-btn{ 
 
\t color: #fff; 
 
    
 
}

<div id="profile-pic-wrap"> 
 
    <div id="profile-pic"> 
 
    <div class="profile-btn-bg"> 
 
     <a href="#" class="profile-pic-btn">Change Profile</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Updated Demo

增加的CSS：

overflow:hidden 

和位置固定