CSS circle mask

Question

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

can you do this using css masks?

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

Thanks

Put it inside the circle with an `overflow: hidden` on the red circle? — Andy Holmes, Sep 23 '14 at 09:53

score 6 · Accepted Answer · answered Sep 23 '14 at 09:57

You can use overflow:hidden; :

DEMO

changes to your CSS : added overflow:hidden; and text-align:center to #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>

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

Updated Demo

Added css:

overflow:hidden

and position fixed

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 23 '14 at 09:58

Manwal

23,450
12
63
93

CSS circle mask

2 Answers2

Updated Demo