CSS实现少半圆弧遮罩

最新推荐文章于 2024-07-12 14:38:32 发布

croyance0601

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量1.7k

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/croyance0601/article/details/88828477

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

想要实现的效果，如下图所示。刚开始实现的时候还考虑过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);
    }