主页 / 问题 / 1386333
Accepted
Meth0d
Asked:2022-07-28 19:52:41 +0000 UTC2022-07-28 19:52:41 +0000 UTC

内部带有透明元素的元素布局

  • 772

在此处输入图像描述

再会。我不知道如何制作这样的块。主要问题是他有一个影子，即 半圆应该是完全透明的，它们也应该有阴影。也不可能抛出背景，因为元素是下拉的。

css

2 个回答

  1. Best Answer

    使用背景渐变绘制形状，然后将drop-shadow()过滤器应用于块（尝试通过抓住块的右下角来调整块的大小）：

    /* Only for example --> */ body { margin: 0; padding: 5px; height: 100vh; box-sizing: border-box; background: 0% 0% / auto url("https://isstatic.askoverflow.dev/m9NKc.png") no-repeat; }

.check {
  height: 350px; width: 975px;
  padding: 30px 20px;
  border-radius: 20px;
  box-sizing: border-box;
  
  background: right 170px center / 70px calc(100% - 70px) linear-gradient(#f00, #f00), right 240px top 0 / 100% 100% linear-gradient(#f00, #f00), right 0 top 0 / 170px 100% linear-gradient(#f00, #f00), right 170px top 0 / 70px 35px radial-gradient(circle at center top, #0000 0 29px, #f00 30px 50px), right 170px bottom 0 / 70px 35px radial-gradient(circle at center bottom, #0000 0 29px, #f00 30px 50px);
  background-repeat: no-repeat;
  
  filter: drop-shadow(0px 4px 5px #000c);
  
  /* Only for example --> */ overflow: hidden; resize: both; min-height: 70px; max-height: 100%; min-width: 425px; max-width: 100%;
}
    <div class="check"></div>

    • 3

  2. 也许这会帮助你

    body{
    background-color: lightgrey;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin: 0;
  }

  .ticket{
    position: relative;
    width: 520px;
    height: 140px;
    background-color: #fff;
    border-radius: 24px;
    overflow: hidden;
  }

  .ticket:after,
  .ticket:before{
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    right: 150px;
    background-color: lightgrey;
  }

  .ticket:after{
    bottom: 0;
    transform: translateY(50%);
  }

  .ticket:before{
    top: 0;
    transform: translateY(-50%);
  }
    <div class="ticket"></div>

    • 1

相关问题