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

它仍然有点尖，但如果您使用角特定的 border-radius 属性，您可以获得类似的效果。

这里我用了border-top-left-radius和border-bottom-left-radius.

.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);
    border-top-left-radius:80%;
    border-bottom-left-radius:200%;
}

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

Answer 2

您可以使用 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>

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

CSS speech bubble with rounded arrow

css

css-shapes