html - 如何反向添加边界半径？

This question already has answers here:

Transparent half circle cut out of a div
                                
                                    （8个答案）
                                
                        
                                2年前关闭。
            
                    
我目前正在尝试实现以下目标：


但是当border-radius: 15px 15px 0 0我得到这个：

最佳答案

仅边界半径并不能解决这个问题，但是您可以这样做：

隐藏在带有圆角的外框上的溢出：
https://codepen.io/sergejmueller/pen/fJEml

border-radius: 50%;

您还可以使用径向渐变：
http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00     15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);

还可以遮罩图像以获得现代解决方案：

-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);