CSS3倒圆角

本文介绍了CSS3倒圆角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 有一种方法可以在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 roundedPerhaps 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倒圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..