透明的空心或切出的圆形 [英] Transparent hollow or cut out circle

问题描述

是否可以仅使用 CSS剪出一个空心圆?

我们都可以做到:

但是我们可以这样做吗?

圆圈必须是空心和透明的.因此，在 div 上放置一个纯色圆圈并不能解决问题.

解决方案

您可以使用 2 种不同的技术来实现透明切出的圆 :

1.SVG

以下示例使用

2.CSS 仅使用 BOX-SHADOWS

创建一个带有 overflow:hidden; 的 div 和一个带有边界半径的圆形伪元素.给它一个巨大的盒子阴影，没有背景:

div{位置:相对；宽度:500px；高度:200px；保证金:0 自动；溢出:隐藏；}div:之后{内容:'';位置:绝对；左:175px；顶部:25px；边界半径:100%；宽度:150px；高度:150px；框阴影:0px 0px 0px 2000px #E3DFD2;}body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<div></div>

对 box-shadows 的浏览器支持是 IE9+ 见 canIuse

同样的方法是使用边框而不是框阴影.如果你需要支持不支持像 IE8 这样的 box-shadows 的浏览器，这很有趣.该技术是相同的，但您需要用顶部和左侧的值进行补偿以将圆保持在 div 的中心:

body{背景: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');背景尺寸:封面；}div{位置:相对；宽度:500px；高度:200px；保证金:0 自动；溢出:隐藏；}div:之后{内容:'';位置:绝对；左:-325px；顶部:-475px；边界半径:100%；宽度:150px；高度:150px；边框:500px 实心 #E3DFD2;}

<div></div>

Is it possible to cut out a hollow circle using only CSS?

This we can all do:

But can we do this?

The circle must be hollow and transparent. Thus the problem is not solved by putting a solid color circle over a div.

解决方案

You can achieve a transparent cut out circle with 2 different techniques :

1.SVG

The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made with 2 arc commands :

With the mask element :

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<svg viewbox="0 0 100 50" width="100%">
  <defs>
    <mask id="mask" x="0" y="0" width="80" height="30">
      <rect x="5" y="5" width="90" height="40" fill="#fff"/>
      <circle cx="50" cy="25" r="15" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>    
</svg>

With one path element :

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;
}
path{
  transition:fill .5s;
  fill:#E3DFD2;
}
path:hover{
  fill:pink;
}

<svg viewbox="-10 -1 30 12">
  <path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>

The main advantages of using SVG in this case are :

• Shorter code
• You can easily use an image or gradient to fill the circle mask
• maintain the boundaries of the shape and trigger mouse envents only over the fill respecting the mask (hover the transparent cut out circle in the example)

2. CSS only using BOX-SHADOWS

Create a div with overflow:hidden; and a round pseudo element inside it with border-radius. Give it a huge box-shadow and no background :

div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:175px; top:25px;
    border-radius:100%;
    width:150px; height:150px;
    box-shadow: 0px 0px 0px 2000px #E3DFD2;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<div></div>

Browser support for box-shadows is IE9+ see canIuse

The same approach would be to use border instead of box-shadows. It is interesting if you need to support borowsers that don't support box-shadows like IE8. The technique is the same but you need to compensate with the top and left values to keep the circle in the center of the div :

body{
    background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
    background-size:cover;
}
div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:-325px; top:-475px;
    border-radius:100%;
    width:150px; height:150px;
    border:500px solid #E3DFD2;
}

<div></div>

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