用于“徽章式”设计的倒置 CSS 类型样式答案

【问题标题】：Inverted CSS type style for "badge-like" design用于“徽章式”设计的倒置 CSS 类型样式
【发布时间】：2017-04-26 05:49:00
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

看看这篇文章。不过，您必须在投影方面发挥创意。

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

【讨论】：

【解决方案3】：

使用一个元素的绝对定位与另一个元素的边缘对接，您可以获得很多里程。在这里，您可以为肖像添加边框半径 (border-radius: 50% 50% 0px 0px;) 和填充以获得半圆形外观。

您可以使用负值top 向上拉的肖像。左边是left: calc(50% - 95px);，表示包含宽度的 50% 减去自身宽度的一半和水平内边距 (150px/2 + 20px)。

您必须确保包含元素 (.wpsm_team_2_member_wrapper) 具有 position: relative。为 .wpsm_team_2_member_wrapper_inner 添加一个上边距，以将其向下移动到肖像之外。

最后，如果你给肖像画一个向上的盒子阴影box-shadow: 0px -3px 5px 0px rgba(0,0,0,.2);，你可以让它看起来像一个连续的阴影。

不确定这是否是您的意思，但希望可以让您继续前进。此处示例：

【讨论】：