带有圆形箭头的 CSS 对话泡泡

Question

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

我已经开始制作方框和箭头(见下文)，现在我唯一的问题是只使用 CSS 使箭头的左边缘呈圆形，就像图片中那样。 任何想法？谢谢。

.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>

Answer 1

你可以使用 transform: skew(); 做这样的事情和 border-radius .我添加了 z-index: -1到伪元素，所以它位于 <span> 后面(我假设你会把文字放在里面)。

.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>