有没有办法在CSS3中做一个倒圆的角落,类似于下面(原始)图形中的左下角?CSS3倒圆角落
/-------\
| |
| |
| |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded
也许边界半径可以结合this technique?
编辑:我不是在寻找讲话泡泡,而只是一种曲线左下角右侧的方法。
有没有办法在CSS3中做一个倒圆的角落,类似于下面(原始)图形中的左下角?CSS3倒圆角落
/-------\
| |
| |
| |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded
也许边界半径可以结合this technique?
编辑:我不是在寻找讲话泡泡,而只是一种曲线左下角右侧的方法。
好了,这是纯粹的疯狂,但肯定有办法做到这一点:-)不交叉browserly,但让我们看到:
我们加价:
<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/
也许这可以在许多方面得到加强:
+1感谢gryzzly。这不是我正在寻找的东西,但它是一种非常酷的技术。请参阅我的编辑。 – VirtuosiMedia 2010-05-29 22:06:12
拿两个:http://jsfiddle.net/ajeN7/ :-) – 2010-05-29 22:17:30
非常好!谢谢!不过,我不确定你为什么要改变漫画。它是网络上最漂亮的字体之一。 ;-) – VirtuosiMedia 2010-05-29 22:49:42
这实现了在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;
}
我不能发表评论还,但这里有一个新的答案(关于Gryzzlys答案):
Gryzzlys第一个例子没有处理不同的背景颜色(用于背景和泡泡)。
但第二个呢。下面是应用了背景颜色的例子:
(我还加边界半径属性,以便将呈现为其他浏览器比Firefox边界)。
这是一个绝妙的想法,但不幸的是,它不会工作,如果页面有一个背景图像。 – 10basetom 2012-10-18 07:54:22
有些方法可以通过使用CSS来解决此问题。我已经决定使用制表技术 - 但可以很容易地适应气泡。
我在这里介绍一个基本的例子,如何制作一个Inverse Border Radius in CSS (here)。这使用一个大小为Border的技巧来使用内部,但您可能需要做一些定位才能使其正常工作,但您可以看到它的可能性。
我也可以推荐这个教程,它显示了倒置的边框,因为它们用于制表符:http://css-tricks.com/better-tabs-with-round-out-borders/ – 2012-04-28 14:16:38