带圆角箭头的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>后面（我假设您将文本放在里面）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

它仍然略微有点，但如果你使用了特定角落的边界半径属性，你可以得到类似的效果。

我在这里使用了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>