倒边界?

时间:2014-05-07 14:35:05

标签: css

鉴于这个简单的plunkr:http://plnkr.co/edit/aTM80EUHAYds1h5TIXTh?p=preview

我希望能够在两个div之间的内角上有一个border-radius(这个例子中唯一的尖角)。我添加了一个div#corner(目前在display:none上)可以做到这一点,但我真的不知道如何(如果可能的话)有一个倒置的border-radius

如何在不使用图像的情况下获得该效果?

修改

Here is这是一种更好,更灵活的方式,感谢@Colandus的帮助。

1 个答案:

答案 0 :(得分:3)

您可以添加一个灰色方块,其长度为您想要的半径,然后在其上方放置一个白色圆形div(圆圈),div的宽度是灰色方块长度的两倍。

请看这里:http://plnkr.co/edit/RxMMvqS74aMq018P5Jsq?p=preview(我重复了你的角落div,并在顶部添加了一个圆圈div)

尝试使用角点和圆圈div的宽度/高度以及圆形div的半径来获得不同的舍入效果。

这是一个更圆润的版本:http://plnkr.co/edit/uwRZHCzAxEcQSQ2Elu6u?p=preview