Div带有透明的切出圆 [英] Div with a transparent cut out circle

问题描述

我可以使用CSS创建一个使用半剪切圆的方格 div 吗？

所需的CSS形状：

HTML：

 < div>< / div& 
  

  div {
 background：＃448CCB; 
 width：300px; 
 height：300px; 
} 
  

解决方案

切出圆透明并让背景通过它显示，您可以使用 box-shadows 在伪元素上将标记最小化。

在下面的演示中，形状的蓝色用框阴影而不是 background-color 属性设置。

HTML：

 < div>< / div> 
  

CS：

  div {
 width：300px; 
 height：300px; 
 position：relative; 
 overflow：hidden; 
} 
 div：before {
 content：''; 
 position：absolute; 
 bottom：50％; 
 width：100％; 
 height：100％; 
 border-radius：100％; 
 box-shadow：0px 300px 0px 300px＃448CCB; 
} 
  

Can I make a rectagle div with a half cut out circle using CSS? The half circle should be transparent and let the background show through.

desired CSS shape :

HTML :

<div></div>

CSS :

div{
    background : #448CCB;
    width:300px;
    height:300px;
}

解决方案

in order to have the white cut out circle transparent and let the background show through it, you can use box-shadows on a pseudo element to minimize markup.

In the following demo, the blue color of the shape is set with the box shadow and not the background-color property.

DEMO

output :

This can also be responsive : demo

HTML :

<div></div>

CS :

div{
    width:300px;
    height:300px;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    bottom:50%;
    width:100%;
    height:100%;
    border-radius:100%;
    box-shadow: 0px 300px 0px 300px #448CCB;
}

这篇关于Div带有透明的切出圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！