Question

我想创建一种类似徽章的盒子，用于团队描述，但我似乎无法想出任何方法来完成它。我已经获得了顶部的边界半径，但不知道如何引导其余部分。这是我目前的代码：https://jsfiddle.net/ubgbjbao/

（我的一点CSS）：

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

Answer 1

如果你想走简单的路线，创建一个png文件，它只是一个带阴影和/或边框的白色背景。它会慢得多，但比不得不尝试使用SVG创建文件更好，如果你想要纯粹的html / css，你可能必须使用它。

Answer 2

看看这篇文章。不过，你必须对你的投影有所启发。

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

Answer 3

使用一个元素的绝对定位可以获得很多里程。在这里，您可以添加边框半径（top）和填充到肖像以获得半圆形外观。

您可以使用负left: calc(50% - 95px);值向上拉的肖像。左边是position: relative，这意味着包含宽度的50％减去它自己的宽度和水平填充的一半（150px / 2 + 20px）。

您必须确保包含元素（.wpsm_team_2_member_wrapper）具有box-shadow: 0px -3px 5px 0px rgba(0,0,0,.2);。为.wpsm_team_2_member_wrapper_inner添加一个上边距，将其向下移出纵向。

最后，如果你给肖像添加一个朝向{{1}}的方框阴影，你可以使它看起来像一个连续的阴影。

不确定这是不是你的意思，但希望能帮助你。示例：