用CSS绘制形状

Question

我不确定是否可能因为我想要一个特定的形状，如下图所示。

任何帮助将不胜感激

Answer 1

带白色背景的圆圈：

是的，您可以使用以下代码。我们所做的只是创建一个带有div的矩形框，并在左侧放置一个圆形框（使用:before和border-radius）。

<强> HTML：

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

<强> CSS：

.shape{
    height: 100px; /* height of rectangular area */
    width: 200px; /* width of rectangular area */
    background: red;
    margin-left: 50px; /* Just for demo */
}
.shape:before{
    position: absolute;
    content: '';
    height: 100px; /* equal to height of box */
    width: 100px; /* equal to height of box because we need a circle */
    background: white;
    border-radius: 50px; /* 50% of height/width to make a circle */
    margin-left: -50px; /* equal to border-radius to move it left by that much */
}

Demo

具有透明背景的圆圈（使用伪元素）：

<强> HTML：

<div class='container'>
    <span class='shape'></span>
</div>

<强> CSS：

.container{
    height: 100px;
    width: 100px;
    background:red;
    position:relative;
    margin-top:100px;
    margin-left:100px;
}
.shape{
    width: 50px;
    height: 100px;
    top:0px;
    left:-50px;
    overflow:hidden;
    position:absolute;
}
.shape:after{
    content:'';
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background:rgba(0,0,0,0);
    position:absolute;
    top:-40px;
    left:-90px;
    border:40px solid red;
}

Demo

具有透明背景的圆圈（使用框阴影）：

（礼貌King King）

<强> CSS：

div {
    width:300px;
    height:200px;
    overflow:hidden;
    position:relative;
    left:100px;
    top:50px;
}
div:before {
    content:'';
    position:absolute;
    top:0;
    left:-100px; /* should be equal to height */
    height:100%;
    width:200px;/* should be equal to height */
    border-radius:50%;
    box-shadow:0 0 0 1000px red;    
}

Demo

额外样本：有关其他样本，请参阅this thread。

Answer 2

只需在嵌套的子元素上使用border-radius即可。没有什么可以解释的，因为代码非常简单，所以我认为你会弄明白，说到这一行很重要 - border-radius: 0 50% 50% 0;是一个简短的top-right和{{{ 1}}设置为bottom-right

Demo

50%

Answer 3

你可以使用两个div，一个矩形红色，另一个白色覆盖css border-radius 100％

Boder-radius W3School