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;
}