如何倒转添加边框半径？

我目前正在努力实现这一点：如何倒转添加边框半径？

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

来源

2017-04-03 Trondro Mulligan

这是不直接pos sible使用边界半径。你可以在白色的矩形上放置一个带有边界半径的白色元素......如果你还需要该部分的透明度，那么请使用_masks_。 – CBroe

CSS/HTML支持掩码？ –

你也可以做这个伪css3 –

单独边界半径不回答这个问题，但你可以做这样的：

溢出隐藏在外箱与圆的角落： 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);

来源

2017-04-03 11:18:48

我认为使用:: before会更好。这样你就创建了不必要的HTML标记。 –

虽然它仍然是一样的想法。 ::之前和::之后只是伪元素 –

是啊！它的确是一样的想法！ +1。但是，创建优化代码的习惯对每个人都是一个好的开始。在一个更大的项目中，只需使用像这样的好习惯就可以显着改善他的项目。 –

你可以使用这个: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>

来源

2017-04-03 11:29:22

如何倒转添加边框半径？

回答

相关问题