1

像这样缩进

是否可以仅使用 CSS 执行此操作？我想了很久，但什么都没想到

4

3 回答 3

3

是的，但前提是您的背景为纯色：

div {
    width: 310px;
    height: 41px;
    background: gray;
    border-radius: 5px;
    position: relative;
}
div:after {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    position: absolute;
    right: -30px;
    bottom: -30px;
}

还要检查DEMO。

编辑：添加了内部阴影：http: //jsfiddle.net/LinkinTED/ThZrf/1/

于 2013-09-19T09:29:52.123 回答
2

是的。您可以创建一个相对定位的 div 并给它一个大数字的边界半径（您必须尝试找到它在什么点变成一个圆）为它指定宽度和高度，将它的 z-index 设置为高于它所在的东西并将其放置在底角。就像是

#circle{
    border-radius: 300px;
    z-index: 2;
    height: 40px;
    width:40px;
    left: 350px;
    top: 20px;
    background-colour:white;
}

这些只是样本值。您需要自己的才能正确执行此操作。如果您想变得更加花哨，我认为您可以指定将半径应用于哪些角。因此，您可以（我认为）在 CSS 中创建精确的形状，而不是像我的方法那样创建一个圆形（但您可以将圆形放置在切掉角落的位置）。

编辑：正如所指出的，如果你想要一个阴影，你可以使用 css box-shadow 属性（注意这在 IE9 下不支持）。

于 2013-09-19T09:26:32.707 回答
1

在不知道您的特定用例的情况下，您可以考虑 Lea Verou 的这种技术：http: //lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

于 2013-09-19T09:30:54.830 回答