Html “的倒CSS类型样式”；“徽章式”；设计

我想创建一种类似徽章的盒子，用于团队描述，但我似乎想不出任何方法来完成它。我有边界半径到顶部，但不知道如何引导到它的其余部分。这是我当前的代码：

（我的一点CSS）：

---

这是我试图实现的：

如果你想走简单的路线，创建一个png文件，它只是一个带有阴影和/或边框的白色背景。

---

这会稍微慢一点，但比尝试使用SVG创建文件要好一些，如果您想要纯html/css的话，可能必须使用SVG

看看这篇文章。不过，你必须用你的影子来创造

您还可以尝试使用SVG屏蔽来实现这一点

---

使用一个元件与另一个元件边缘对接的绝对定位，您可以获得大量里程。在这里，您可以添加边框半径（

边框半径：50%50%0px 0px；

）和填充到纵向以获得半圆形外观

您可以使用负数

top

值向上拉肖像。左边是<代码>左边：计算（50%-95px）表示包含宽度的50%减去自身宽度和水平填充的一半（150px/2+20px）

您必须确保包含元素（.wpsm\u team\u 2\u member\u wrapper）具有

位置：relative

。在.wpsm\u team\u 2\u member\u wrapper\u inner中添加一个上边距，以将其向下移动，使其远离肖像

最后，如果给肖像画一个指向上的方块阴影

方块阴影：0px-3px 5px 0px rgba（0,0,0,2）
不确定这是否是你的意思，但希望能让你走。示例如下：

您可能正在寻找这样的把戏，
.wpsm_team_2_member_wrapper{
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }