带圆形箭头的CSS气泡 [英] CSS speech bubble with rounded arrow

问题描述

我正在尝试在CSS中重新创建以下图像:

I'm trying to recreate the following image in CSS:

我已经开始制作方框和箭头(见下文)，现在我唯一的问题是仅使用CSS来使箭头的左边缘变成圆形，就像图像中一样.任何想法?谢谢.

I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image. Any idea? Thanks.

.speech-bubble {
    position: relative;
    background: #ff0d1e;
    display: inline-block;
    width: 239px;
    height: 95px;
    margin: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.speech-bubble:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -32px;
    width: 0;
    height: 0;
    border-style: inset;
    border-width: 0 32px 20px 0;
    border-color: transparent #ff0d1e transparent transparent;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}

<span class="speech-bubble"></span>

推荐答案

您可以使用 transform:skew(); 和 border-radius 做类似的事情.我在伪元素中添加了 z-index:-1 ，因此它位于< span> 的后面(我假设您将文本放在其中).

You could do something like this using transform: skew(); and border-radius. I added z-index: -1 to the pseudo-element so it sits behind the <span> (I'm assuming you will put text inside).

.speech-bubble {
    position: relative;
    background: #ff0d1e;
    display: inline-block;
    width: 239px;
    height: 95px;
    margin: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.speech-bubble:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -32px;
    width: 70px;
    height: 30px;
    background-color: #ff0d1e;
    transform: skew(55deg);
    transform-origin: top right;
    border-radius: 15% 0 0 0 / 25%;
    z-index: -1;
}

<span class="speech-bubble"></span>

这篇关于带圆形箭头的CSS气泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！