css HTML中的透明空心或剪切形状

jaxagkaj 于 2023-03-05 发布在其他

关注(0)|答案(7)|浏览(169)

是否可以仅使用 CSS剪切空心圆？
我们都可以做到这一点：

但我们能做到吗？

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

css

来源：https://stackoverflow.com/questions/8286550/transparent-hollow-or-cut-out-shape-in-html

7条答案

按热度按时间

3npbholx1#

您可以使用2种不同的技术实现透明的圆形切口：

1. SVG

以下示例使用inline svg。第一个代码段使用mask element剪切透明圆，第二个空心圆使用path element生成。圆使用2个arc命令生成：

- 使用掩码元素：**

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>

- 带有一个路径元素：**

一个二个一个一个
在这种情况下使用SVG的主要优点是：

较短代码
您可以轻松地使用图像或渐变填充圆形蒙版
保持形状的边界，并仅在与遮罩相关的填充上触发鼠标事件（在示例中，悬停透明的剪切圆）

CSS仅使用方框阴影
用overflow:hidden;创建一个div，在其中用border-radius创建一个round伪元素，给它一个巨大的方框阴影，没有背景：

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>

IE9+浏览器支持方框阴影，请参阅canIuse *

同样的方法是使用border而不是box-shadow。如果你需要支持不支持box-shadow的浏览器，比如IE8，这会很有趣。技术是一样的，但是你需要用top和left的值来补偿，以保持圆圈在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>

赞(0）回复(0）举报 2023-03-05

rqqzpn5f2#

这可以通过radial gradient背景和指针事件来实现（允许鼠标通过圆圈层进行交互，例如文本选择）。

这就是它的代码：

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: -moz-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
  background: -webkit-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
  background: -ms-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
  background: -o-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
  pointer-events: none;
  /* send mouse events beneath this layer */
}

<body>

  <p class="underneath">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <div class="overlay"></div>

</body>

赞(0）回复(0）举报 2023-03-05

yeotifhr3#

关于web-tiki的回答，我想补充的是，你总是可以用translate(-50%,-50%)居中一个div，所以使用border-属性是没有问题的，它有更好的浏览器支持。

div{
    position:relative;
    width:500px; 
    height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius:50%;
    width:150px; height:150px;
    border: 1000px solid rebeccapurple;
}

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

<div></div>

你可以用这个技巧来获得真正的创造力：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-03-05

t9aqgxwy4#

关于“Pius Nyakoojo”中的“方法1”，稍微改进一下（见下文）就可以了。我个人认为这是最简单的解决方案：

<html>
<!-- Assuming the stuff to mask is a 100 pixel square -->
<style>
.mask {
    position: absolute;
    top: -50px;                     /* minus half the div size */
    left: -50px;                    /* minus half the div size */
    width: 100px;                   /* the div size */
    height: 100px;                  /* the div size */
    background-color: transparent;
    border-radius: 100px;           /* the div size */
    border: 50px solid white;       /* half the div size */
    pointer-events: none;           /* send mouse events beneath this layer */
}

.stuff {
    position: absolute;
    width: 100px;                   /* the div size */
    height: 100px;                  /* the div size */
    overflow: hidden;               /* hide the excess of the mask border */
    background-color: #CCC;
}
</style>
<body>
    <div class="stuff">
        <div class="mask"></div>
        blah blah blah blah blah
        blah blah blah blah blah
        blah blah blah blah blah
    </div>
</body>
</html>

赞(0）回复(0）举报 2023-03-05

n3ipq98p5#

我们可以用radial-gradient和mask来实现，用一个div，没有伪元素。

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  /* this is flexible. you can change */
  --circle-radius: 100px;
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}

<div class="a"></div>

圆半径也可以是百分比值：
一个二个一个一个
另一个想法：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 100px;
  --border-width: 30px;
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), transparent calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}

<div class="a"></div>

反向：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 100px;
  --border-width: 30px;
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, #000 var(--circle-radius), transparent calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), #000 calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}

<div class="a"></div>

赞(0）回复(0）举报 2023-03-05

cvxl0en26#

方法1-首选

<div class="circle"></div>

$radius: 50px;
$thickness: 5px;

.circle {
    width: $radius;
    height: $radius;
    background-color: transparent;
    border-radius: $radius;
    border: $thickness solid gray;
}

方法二
一个二个一个一个

赞(0）回复(0）举报 2023-03-05

tcbh2hod7#

你可以使用css蒙版和额外的svg图片。
尽管浏览器支持较弱

body {
  background: url(https://data.whicdn.com/images/50959200/original.jpg);
  background-size: cover;
  background-position: center;
}

.circle {
  width: 150px;
  height: 150px;
  background: black;
  border-radius: 50%;
  -webkit-mask: url(https://svgshare.com/i/GLf.svg);
  -webkit-mask-size: 125%; /* change it */
  -webkit-mask-position: center;
  margin: 20px auto;
}

<div class="circle"></div>

赞(0）回复(0）举报 2023-03-05

我来回答

css HTML中的透明空心或剪切形状

7条答案

1. SVG

相关问题

热门标签

最新问答