如何使用半径SVG或CSS切割DIV角[重复]

yjghlzjz  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(89)

此问题在此处已有答案

CSS Cut out circle from a rectangular shape [duplicate](3个答案)
3天前关闭。
我想削减与边界半径DIV的右下角,如两个图像below:
100d1x

的字符串

zy1mlcev

zy1mlcev1#

下面的代码几乎和你想要的差不多,当然,我默认设置背景形状为白色,你应该根据父背景来设置。
希望对你有用

.card {
        width: 340px;
        height: 500px;
        background-color: aqua;
        border-radius: 32px;
        overflow: hidden;
        position: relative;
      }

      .card::before {
        content: "";
        width: 64px;
        height: 64px;
        background-color: transparent;
        position: absolute;
        right: -4px;
        bottom: 86px;
        border-bottom-right-radius: 64px;
        box-shadow: 0 20px 0 0 #ffffff;
      }

      .card::after {
        content: "";
        width: 64px;
        height: 64px;
        background-color: transparent;
        position: absolute;
        right: 86px;
        bottom: -4px;
        border-bottom-right-radius: 64px;
        box-shadow: 20px 0 0 0 #ffffff;
      }

      .card .shape {
        width: 80px;
        height: 80px;
        background-color: #ffffff;
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 99;
        border-radius: 50%;
      }

      .card .shape::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 80px solid transparent;
        border-right: 80px solid #ffffff;
        border-bottom: 80px solid #ffffff;
        border-left: 80px solid transparent;
        position: absolute;
        right: -32px;
        bottom: -32px;
      }

      .zoom {
        width: 80px;
        height: 80px;
        background-color: black;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 99;
        border-radius: 50%;
      }

      .card img {
        width: 100%;
        height: 100%;
      }

个字符

相关问题