繁体   English   中英

CSS3倒圆角

CSS3 Inverted Rounded Corner

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

有没有办法在CSS3中做一个倒圆角,大概就像下面(粗略)图中的左下角?

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

也许边界半径可以与这种技术相结合?

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

5 个回复

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

我们的加价:

<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声明:-)

我还不能评论,但所以这是一个新的答案(关于Gryzzlys的回答):

Gryzzlys的第一个例子没有处理不同的背景颜色(背景和气泡)。

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

http://jsfiddle.net/tGnfb/

(我还添加了border-radius属性,以便为Firefox之外的其他浏览器渲染边框)。

这实现了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;
    }

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

我在这里介绍了如何在CSS中创建反向边界半径的基本示例(此处) 这使用了一个大小为Border的技巧来使用内部,你可能需要做一些定位才能让它正常工作,但是你可以看到它的可能性。

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

1 CSS3倒/倒圆角工具提示

我正在尝试使用CSS创建如下所示的工具提示: 这就是我试图解决的方式: http : //jsfiddle.net/NXLuZ/ 所以,基本上我正在使用css3遮罩: 在常规显示器上看起来不错,但是当您在视网膜显示器上查看或尝试放大时,您可以看到问题: 因为我使用渐 ...

2 CSS 3形状:倒圆角“类似隧道的样式”

我正在寻找创建一个像隧道一样的div,它具有倒圆的边框 如您所见,它具有从左到右的“扩展隧道效应”。 理想情况下,方格背景是透明的,但如果不可能的话,我可以使背景色为纯色。 谁能帮助我创建此css3形状? 希望我可以玩一个jsfiddle? 谢谢! ...

4 使用 CSS 的倒圆角

我有 CSS 代码 #box { width: 200px; height: 50px; background-color: blue; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; positio ...

2019-09-05 06:51:08 4 1001   html/ css
6 边框倒圆角?

我正在尝试渲染一个没有边框但具有圆角的React表。 我尝试使用border-collapse: collapse ,它删除了表中各列之间出现的边界,但是它也删除了我设置的border-radius属性。 有谁知道如何实现这一目标? 这是我设计桌子的方式。 注意我没有在任何地方指定边 ...

7 圆角没有JavaScript或CSS3

我有一个导航菜单,其中链接的悬停状态看起来像这样, 如您所见,橙色背景上有一个圆角背景。 客户已要求该功能可通过IE6正常运行(它们尚未处于可以升级的阶段)。 现在我是最近才开始进行网络开发的,所以我还没有学习过实现这种效果的旧技术,请给我一些启发? 下面是我的代码,目前我正在使用 ...

8 CSS3:为图像添加圆角

我一直在尝试为框架添加圆角但它只适用于mozilla而不是Chrome或IE。 我没有将border-radius属性添加到图像标记,而是添加到canvas标记 谁能提出建议? 该网站是n1bar.com ...

9 CSS 3 特色圆角边框

我怎样才能用 CSS3 在我的边框中实现这个特殊的角落 这是我现在得到的: http://jsfiddle.net/hashie5/nDv5k/ ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM