CSS3倒圆角

小编典典

CSS3倒圆角

css

有没有办法在CSS3中做一个倒圆角，大致类似于下面（粗略）图中的左下角？

/-------\
|       |
|       |
|       |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded

也许边界半径可以和这种技术结合起来？

编辑：我不是在寻找气泡，而只是在左下角弯曲该点的右侧的一种方法。

阅读 367

2020-05-16

共1个答案

小编典典

好吧，这纯粹是疯狂，但是肯定有一些方法可以做到这一点:-)并非跨浏览器，而是让我们看看：

我们的加价：

<div id="bubble">
    <p>This is madness!</p>
</div>

我们的CSS：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;/* well, madness it is! */
    }
#bubble:before {
    content:'';
    border:20px solid;
    border-color:#fff transparent transparent;
    position:absolute;
    top:110px;
    left:25px;
    z-index:2;
}
#bubble:after {
    content:'';
    border:20px solid;
    border-color:#000 transparent transparent;
    position:absolute;
    top:111px;
    left:25px;
    z-index:1;
}

我只在Firefox 3.6.3中进行了测试，但思路很明确:-)

这是两个：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    position:relative;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
    border-radius:20px 20px 20px 0;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;
    }
#bubble:before {
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    border-left:1px solid #000;
    position:absolute;
    top:100px;
    left:-1px;
}
#bubble:after {
    content:'';
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
    border-radius:20px 0 0 0;
    border:solid #000;
    border-width:1px 0 0 1px;
    width:20px;
    height:19px;
    position:absolute;
    top:100px;
    left:0;
}

也许可以通过许多方式增强此功能：

使其跨浏览器（至少+ webkit和Opera）
不过，借助http://code.google.com/p/ie7-js/之类的东西（为了使生成的内容能够正常工作），它可以在IE中运行而无需四舍五入。
了解如何在高度灵活的情况下工作。
更改字体系列声明:-)

2020-05-16