css - cssで異なる形状を作成するには?

Question

アップロードした画像のような形をcssで作りたいです。これを行う方法を教えてください。

ありがとう

Answer 1

それは難しいことではありません。ラッパー内に、不要なものを切り抜く円を作成します。

デモ

HTML：

<div class='shape-wrap'>
    <div class='shape'></div>
</div>

関連するCSS：

.shape-wrap {
    overflow: hidden;
    width: 32em; height: 8em;
}
.shape {
    box-sizing: border-box;
    margin: -175% -50%;
    width: 200%; height: 800%;
    border: solid 2em dodgerblue;
    border-radius: 50%;
    box-shadow: inset 0 0 .5em .25em dimgrey;
}