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

问题描述

只有 CSS

可以切出空心圆吗？

：

但是我们能做到吗？

圆圈必须是空心透明的。因此，问题不是通过在 div 上放置一个纯色圆来解决。

解决方案

您可以使用以下两种不同的技术实现透明切出圈子：

1.SVG

以下示例使用内嵌svg 。第一个代码段使用掩码元素切割透明圆和第二个空心圆用一个路径元素。该圈子使用2个 arc命令 ：

data-lang =jsdata-hide =falsedata-console =truedata-babel =false>

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

 < svg viewbox =0 0 100 50width =100％ > < defs> < mask id =maskx =0y =0width =80height =30> < rect x =5y =5width =90height =40fill =＃fff/> < circle cx =50cy =25r =15/> < / mask> < / defs> < rect x =0y =0width =100height =50mask =url（#mask）fill-opacity =0.7 < / svg>  

  body {background：url（'https：// farm.9staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'）; background-size：cover;} svg {display：block;宽度：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>  

使用SVG这种情况是：

• 较短的代码


• 您可以轻松使用图片或渐变填充圈子掩码


• 保持形状的边界，并触发鼠标事件只在相对于掩码的填充（在示例中悬停透明切出圆 li>
  

< img src =https://i.stack.imgur.com/QvZph.pngalt =透明剪出圆圈>

2。 CSS只使用BOX-SHADOWS

使用 overflow：hidden; 创建一个div， border-radius。给它一个巨大的盒子阴影，没有背景：

  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>  pre> 

对box-shadows的浏览器支持是IE9 +，请参阅 canIuse

同样的做法是改用border的阴影。这是有趣的，如果你需要支持不支持像IE8的box-shadows的borowsers。该技术是相同的，但您需要补偿顶部和左边的值，以保持圆形在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>  

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屋！