CSS实现少半圆弧遮罩

想要实现的效果，以下图所示。刚开始实现的时候还考虑过canvas画图，固然也能够实现，可是以为仍是css实现简单一些。

html部分

<div class="head-img-shade">
    <div class="head-img-shade-top"></div>
    <div class="head-img-shade-bottom"></div>
</div>

css部分

.head-img-shade {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        position: absolute;
        overflow: hidden;  /*重要一步，不可省略*/
        background-color: #07589a;
    }
    .head-img-shade-top {
        width: 60px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0);
    }
    .head-img-shade-bottom {
        width: 80px;
        height: 20px;
        background-color: rgba(0, 0, 0, 0.6);
    }