Clever Geek Handbook

CSS circle mask

I want to create a dark mask at the bottom of the circle that is contained in the main circle.

Can you do it with css masks?

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

thank

+3


source to share


2 answers


You can use overflow:hidden;

:

DEMO



Changes in the CSS: added overflow:hidden;

and text-align:center

in#profile-pic 

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

a.profile-pic-btn{
	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>
Run codeHide result


+6


source


Demo updated

Added css:



overflow:hidden

and fixed position

+1


source






More articles:


All Articles