CSS3倒圆角-Java 学习之路

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

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

也许边界半径可以与this technique结合？

编辑：我不是在寻找一个讲话泡泡，而只是一种弯曲左下角点右侧的方法 .

5 回答

0

我还不能评论，但所以这是一个新的答案（关于Gryzzlys的回答）：

Gryzzlys的第一个例子没有处理不同的背景颜色（背景和气泡） .

但第二个确实如此 . 以下是应用背景颜色的示例：

http://jsfiddle.net/tGnfb/

（我还添加了border-radius属性，以便为Firefox以外的其他浏览器渲染边框） .

回复于 2024-05-02T06:39:44+08:00
6

如果你想要实现那种外观（一个语音气球），最好只使用一个图像:)

回复于 2024-05-02T06:39:44+08:00

嗯，这是纯粹的疯狂，但肯定有办法实现这个:-)不是跨浏览器，但让我们看看：

我们的加价：

<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;
}

结果：http://jsfiddle.net/MrLWY/

我只在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;
}

结果：http://jsfiddle.net/ajeN7/

也许这可以通过多种方式得到改善：

让它跨浏览器（webkit和opera，至少）
它可以在IE中工作，但没有舍入，在http://code.google.com/p/ie7-js/之类的帮助下（为了使生成的内容起作用） .
了解如何使用灵活的高度 .
更改font-family声明:-)

回复于 2024-05-02T06:39:44+08:00

16

有一些方法可以通过使用CSS来解决这个问题 . 我决定使用一种技术来制作标签 - 但可以很容易地适应语音泡泡 .

我在这里介绍了如何制作Inverse Border Radius in CSS (here)的基本示例 . 这使用了一个大小为Border的技巧来使用内部，你可能需要做一些定位才能让它正常工作，但是你可以看到它的可能性 .

回复于 2024-05-02T06:39:44+08:00

这实现了FF的效果 . 对其他浏览器使用适当的 border-radius 变体 . 基本上你使用3 div 系统，一个与背景颜色相同的系统 . 仅适用于平面颜色的背景 .

<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>

而CSS：

body
    {
    background-color:red;
    }

.top
    {
    display: block;
    width: 200px;
    height: 50px;
    background-color:white;
    padding:5px;

    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    }

.bottom
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;    
    }

.bottom2
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;  
    -moz-border-radius-topleft:20px;
    }

回复于 2024-05-02T06:39:44+08:00

CSS3倒圆角

5 回答

相关问题