【问题标题】:CSS speech bubble with full background image带有完整背景图像的 CSS 语音气泡
【发布时间】:2013-05-15 17:58:48
【问题描述】:

我知道在元素底部简单地添加一个小三角形很容易,但我希望背景图像延伸到三角形中。我怎样才能做到这一点?

【问题讨论】:

  • 他知道如何制作语音气泡并添加三角形,但他也希望箭头具有用于语音气泡的背景图像
  • @Mr.Alien 您可以通过添加圆角和额外元素或伪元素来制作三角形,使元素看起来像对话泡泡,但我需要泡泡的背景图像延伸到三角形。
  • @Bobe 代码/演示在哪里?
  • 如果你正在通过纯 css(无图像)做语音气泡this is pretty good site

标签: css background-image


【解决方案1】:

这里我昨天刚刚回答了这样的问题:Creating a transparent arrow above image in CSS3

但是对于底部的三角形,你会做这样的事情:

.image {
    position:relative;
    height:200px;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    content:'';
    position:absolute;
    height:0;
    border-bottom:20px solid white;
    bottom:0;
}
.image:before {
    left:0;
    width:20px;
    border-right:16px solid transparent;
}
.image:after {
    left:36px;
    right:0;
    border-left:16px solid transparent;
}

还有一个DEMO

对于更高级的内容,您还可以使用maskingclip-path

【讨论】:

    猜你喜欢
    • 2023-02-22
    • 2013-09-16
    • 2012-02-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多