「徽章狀」設計的倒置CSS類型樣式

我想創建一種類似徽章的方塊，用於團隊描述，但似乎無法想出完成任何方式。我有邊界半徑爲頂端，但不知道如何引導到其餘的。這是我當前的代碼：https://jsfiddle.net/ubgbjbao/「徽章狀」設計的倒置CSS類型樣式

（小我的CSS）：

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

2017-04-25 Migy Dgz

你可能在尋找這樣一招，http://stackoverflow.com/questions/22421880/inverted-border-radius-possible –

如果你想要去的輕鬆路線，創建一個只有帶陰影和/或邊框的白色背景的PNG文件。它會稍微慢一些，但要比嘗試使用SVG創建文件要好，如果你只是想要純html/css的話，你可能不得不使用它。

2017-04-25 21:13:57 mcheah

看看這篇文章。儘管如此，您仍然必須對自己的投影技術有所創意。

您也可以嘗試實現這個使用帶有SVG屏蔽。

2017-04-25 21:16:29

可以使用對接最多的另一個邊緣一個元素的絕對定位得到了很多的里程。在這裏，您可以向肖像添加邊框半徑（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);你可以讓它看起來像一個連續的陰影。

不知道這是你的意思，但希望能讓你去。例如這裏：

2017-04-25 21:49:00 sfscs

回答