此问题在此处已有答案:
CSS Cut out circle from a rectangular shape [duplicate](3个答案)3天前关闭。我想削减与边界半径DIV的右下角,如两个图像below:100d1x的字符串
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%; }
个字符
1条答案
按热度按时间zy1mlcev1#
下面的代码几乎和你想要的差不多,当然,我默认设置背景形状为白色,你应该根据父背景来设置。
希望对你有用
个字符