搜索

首页  >  问答  >  正文

带有透明半圆切口的 Div

我想仅使用 CSS3 制作一个透明的切出半圆形形状。唯一的要求是形成形状的所有元素必须是黑色或透明

不能使用上面有一个白色圆圈的黑色矩形,因为半圆必须是透明的并让背景显示出来。

所需形状:

P粉022285768P粉022285768400 天前750

全部回复(2)我来回复

  • P粉138871485

    P粉1388714852023-10-23 14:34:32

    您可以使用盒子阴影来制作透明剪切圆

    body {
      background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat;
      background-size: cover;
    }
    div {
      display: inline-block;
      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 #000;
    }
    .transparent {
      opacity: 0.5;
    }

    这可以是具有百分比长度的响应式

    body {
      background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;
      background-size: cover;
    }
    div {
      width: 40%; 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 #000;
    }
    .transparent {
      opacity: 0.5;
    }

    回复
    0
  • P粉851401475

    P粉8514014752023-10-23 09:09:07

    也许可以使用 CSS ::after 伪属性来做到这一点,如下所示:

    body {
      background: green;
    }
    
    .rect {
      height: 100px;
      width: 100px;
      background: rgba(0, 0, 0, 0.5);
      position: relative;
      margin-top: 100px;
      margin-left: 100px;
    }
    
    .circle {
      display: block;
      width: 100px;
      height: 50px;
      top: -50px;
      left: 0;
      overflow: hidden;
      position: absolute;
    }
    
    .circle::after {
      content: '';
      width: 100px;
      height: 100px;
      -moz-border-radius: 100px;
      -webkit-border-radius: 100px;
      border-radius: 100px;
      background: rgba(0, 0, 0, 0);
      position: absolute;
      top: -100px;
      left: -40px;
      border: 40px solid rgba(0, 0, 0, 0.5);
    }
     

    回复
    0
  • 取消回复