CODEWITHSUNDEEP
htmlcss
Erdss4
Erdss4

Reputation: 1125

How can I make an speech box with an right angle triangle (CSS)

I am trying to make a div look a little like a speech box with a triangle at the top left, currently I have this:

.bubble 
{
position: relative;
width: 240px;
height: 120px;
padding: 12px;
background: brown;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left: 30px;
margin-top: 30px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 17px 23px 17px 0;
border-color: transparent brown;
display: block;
width: 0;
z-index: 1;
left: -23px;
top: 0px;
}
<div class="bubble"></div>

And I am looking to have it like:

enter image description here

Upvotes: 0

Views: 359

Answers (1)

jek
jek

Reputation: 148

.bubble 
{
position: relative;
width: 240px;
height: 120px;
padding: 12px;
background: brown;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left: 30px;
margin-top: 30px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0px 23px 17px 0;
border-color: transparent brown;
display: block;
width: 0;
z-index: 1;
left: -23px;
top: 0px;
}
<div class="bubble"></div>

Here try this one, i removed the border-top in your style, so it goes like this, border-width: 0px 23px 17px 0;. Let me know if this is what youre aiming for.

EDIT: By the way if you want to make some adjustments to that triangle you can adjust the border-right and border-bottom to make it look like what you've shown in your image.

Upvotes: 1

Related Questions