Creat a speech bubble with css


#1

image
.speech:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid black;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
image
Why when I set border-top and border-bottom color to transparent and then border-right turns out to be a triangle instead of a rectangle?

Here you can see when I change all the border colors to be black, it appears as a rectangle.
image
image


#2

And in what case should we set the width and height to be zero?


#3

@weiqhyeah I would actually love to know the answer to that too…


#4

https://www.ecosia.org/search?q=css+shapes+using+border+property

The SERP above contains several good examples and explanations.


#5

I’ve read it through. Yep, good explanations~~Thank you, Roy~:grin:


#6

Where there is a line through “Thank you, roy” ?? :worried:


#7

That would be caused by strike-through markdown, a double tilde on either side. Can you still edit your post? Just put a space between the second tilde and the text, and for display, one on the end of the text, too.

~~ strike-through ~~


#8

Yes, I reedited. I deleted a “~” after “Roy”. When there are two “~~” before and after a word or sentence, there will be line through it.


#9

Note the example above. It only applies when the tilde pair are touching the text on the left side.


#10

Hi, Roy. Do you know in which website I can get some exercises about html, css, jquery, js… I need lots of practice. Thank you ~~


#11

repl.it community


#12

I can’t sign up nor log in :expressionless: What’s the problem?


#13

Sorry for waiting but I’ve been busy. I think you need to first go to the main site sign up there and then enable classes.