CODEWITHSUNDEEP
csscss-shapes
Nesta
Nesta

Reputation: 1008

CSS speech bubble with rounded arrow

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

enter image description here

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>

Upvotes: 2

Views: 3887

Answers (2)

Brett Peters
Brett Peters

Reputation: 161

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>

Upvotes: 3

Gage Hendy Ya Boy
Gage Hendy Ya Boy

Reputation: 1574

It's still slightly pointed, but if you used corner-specific border-radius properties you can get a similar effect.

Here I used border-top-left-radius and 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>

Upvotes: 0

Related Questions