html - "badge-like"设计的反向 CSS 类型样式

Question

我想创建一种类似徽章的框，用于团队描述，但我似乎想不出任何方法来完成它。我有 border-radius 去顶部，但不知道如何引导到它的其余部分。这是我当前的代码:https://jsfiddle.net/ubgbjbao/

(我的一些 CSS):

.wpsm_team_2_member_wrapper{
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }

这是我试图实现的目标:https://i.maagic.pw/MagnifloriousDeityMash

Answer 1

如果您想走简单的路线，请创建一个纯白色背景且带有投影和/或边框的 png 文件。 它会稍微慢一点，但比必须尝试使用​​ SVG 创建文件要好，如果你想要纯 html/css，你可能必须使用它。