如何反转添加边框半径？

Question

我目前正在努力实现这一目标：

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

Answer 1

单独的边界半径并不能解决这个问题，但你可以这样做：

隐藏在带有圆角的外框上的溢出： 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);

Answer 2

您可以使用此:before css选择器：

.box{
  background:red;
  width:50px;
  height:100px;
  border-radius:3px;
  position:relative;
  margin-top:30px;
}
.box:before{
  content:"";
  width:50px;
  height:30px;
  border-radius:100%;
  background:#fff;
  position: absolute;
  top: -17px;
}

<div class="box">
</div>