如何在CSS中创建不同的形状？

Question

我想用css创建一个像上传图像一样的形状。请让我知道如何做到这一点。

由于

Answer 1

这并不困难。您可以在包装器中创建一个圆圈，用于剪切您不需要的内容。

demo

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