首页 文章

讲话泡泡与背景图像，但这里是带圆角的踢球者

提问于
浏览 次
0

我正在创建一个在小三角形中具有背景的语音泡泡，但唯一的问题是它还需要圆角 . 我不完全确定如何做到这一点，但任何黑客或任何事情都会受到赞赏 .

这就是我所拥有的

HTML

<div class="image">
    <img class="test" src="http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png" alt="leopard" />
</div>

CSS

.image {
    position:relative;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    border-left: 20px solid white;
    content: "";
    left: 0;
    position: absolute;
    width: 0;
}
.image:before {
    border-bottom: 5px solid transparent;
    height: 34px;
    top: 0;
}
.image:after {
    top: 39px;
    bottom:0;
    border-top: 5px solid transparent;
}
.test {
    display:block;
    width:100%;
}

这是一个小提琴 . http://jsfiddle.net/yL7Hg/

编辑：如果它有帮助我只需要左上角的半径，因为我的设计工作方式 . 我可以在.image上使用border-radius来获得右上角 .

html css css3

3 回答

  • 1

    这里是：

    http://jsfiddle.net/HYgbu/

    <div class="mask">
<img class="second" src="http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png" alt="leopard" /></div>

    我知道它不是一个完美的解决方案，但它仍然是我的第一个想法 .

    回复于
  • 1

    试试这个：http://www.html5rocks.com/en/tutorials/masking/adobe/

    使用HTML5剪切和屏蔽 .

    它使用HTML5时具有浏览器限制 . 但是所有最近的浏览器都支持它 .

    回复于
  • 1

    使用标准CSS可以更轻松地实现这一点 . 只需设置2个DIV，一个用于箭头，另一个用图像作为背景（而不是IMG标记）：

    <div class="arrow" ></div>
<div class="test" ></div>

    和2个相应的类：

    .arrow {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:35px solid #1E0C01; 
    float:left;
    margin-top:50px;
}

.test {
    margin-left:35px;
    width:340px;
    height: 240px;
    background-size:cover;
    background-image: url("http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png");

    就是这样：http://jsfiddle.net/yL7Hg/5/

    回复于

相关问题