用CSS绘制形状

Question

我不确定是否有可能因为我想要一个特定的形状,如下图中CSS所示.

任何帮助,将不胜感激

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 */
}

演示

圆形透明背景(使用伪元素):

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

演示

圆形透明背景(使用框阴影):

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

演示

额外样品:有关其他样品,请参阅此主题.