CSS3倒圆角 [英] CSS3 Inverted Rounded Corner

问题描述

有一种方法可以在CSS3中做一个倒圆角，大约像下面（粗糙）绘图中的左下角？

  / ------- \ 
 | | 
 | | 
 | | 
 | ______ / 
 | / < - 左侧齐平（直线），倾斜应为圆形
  

b $ b

也许border-radius可以与这个技术？

编辑：我不是在寻找一个讲话气泡，而只是一个方法来弯曲左下角的点。

解决方案

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

我们的标记：

 < div id =bubble> 
< p>这是疯狂！< / 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; / *很好，疯狂！ * / 
} 
 #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中测试过。

 
 code> #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/

也许这可以通过多种方式增强： p>

• 使其跨浏览器（至少+ webkit和歌剧）


• ，但没有舍入，但有助于 http://code.google.com/ p / ie7-js / （以便生成的内容可以正常工作）。


• 了解如何使用灵活的高度。


• 更改font-family声明： - ）

Is there a way to do an inverted rounded corner in CSS3, something approximately like the bottom left corner in the (crude) drawing below?

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

Perhaps border-radius could be combined with this technique?

Edit: I'm not looking for a speech bubble, but rather just a way to curve the right side of the point on the bottom left.

解决方案

Well, this is pure madness, but certainly there are ways to achieve this :-) not cross-browserly, but let's see:

Our mark-up:

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

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

The result: http://jsfiddle.net/MrLWY/

I have only tested this in Firefox 3.6.3, but the idea is clear :-)

Here is take two:

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

And the result: http://jsfiddle.net/ajeN7/

Perhaps this can be enhanced in many ways:

• make it cross-browser (+webkit and opera, at least)
• it could work in IEs, without roundings, though, with help of something like that http://code.google.com/p/ie7-js/ (in order for generated content to work).
• to find out how it could work with flexible height.
• to change the font-family declaration :-)

这篇关于CSS3倒圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！