「バッジのような」デザインの反転CSSタイプスタイル

Question

バッジのようなボックスを作成して、チームの説明に使用したいと思っていますが、それを実現する方法がないようです。私はボーダー半径を上に持っていますが、残りの部分にどのようにつながるかは考えていません。 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ファイルを作成します。 純粋にhtml/cssが必要な場合は、SVGを使用してファイルを作成する必要がありますが、最低限の速度が必要です。

Answer 2

この投稿を見るあなたはあなたのドロップシャドウで創造的になる必要があります。

'Inverted' border-radius possible?

また、SVGを使用してこのマスキングを実装しようとすることができます。

https://www.html5rocks.com/en/tutorials/masking/adobe/

Answer 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);とすると、影を連続的な影のように見せることができます。

これがあなたが意図したものなのかどうかはわかりませんが、うまくいけばあなたに行くことができます。ここでの例：あなたは、おそらくこのようなトリックを探している

https://jsfiddle.net/ubgbjbao/2/