鉴于这个简单的plunkr:http://plnkr.co/edit/aTM80EUHAYds1h5TIXTh?p=preview
我希望能够在两个div之间的内角上有一个border-radius
(这个例子中唯一的尖角)。我添加了一个div#corner
(目前在display:none
上)可以做到这一点,但我真的不知道如何(如果可能的话)有一个倒置的border-radius
。
如何在不使用图像的情况下获得该效果?
修改
Here is这是一种更好,更灵活的方式,感谢@Colandus的帮助。
答案 0 :(得分:3)
您可以添加一个灰色方块,其长度为您想要的半径,然后在其上方放置一个白色圆形div(圆圈),div的宽度是灰色方块长度的两倍。
请看这里:http://plnkr.co/edit/RxMMvqS74aMq018P5Jsq?p=preview(我重复了你的角落div,并在顶部添加了一个圆圈div)
尝试使用角点和圆圈div的宽度/高度以及圆形div的半径来获得不同的舍入效果。
这是一个更圆润的版本:http://plnkr.co/edit/uwRZHCzAxEcQSQ2Elu6u?p=preview