How to make the tip of the "dialogue balloon"?

Question

Navigation

#1 by (4 votes)

2

How do I make this triangle before the numbers flap? Can you do this by manipulating the borders?

html css

asked by anonymous 06.04.2015 / 03:40

1 answer

Centralize div container materialize Required ErrorMessage dynamic content

score 4 · Accepted Answer

Yes, and you need a separate element just for the arrow. For example, using a <div> :

div {
    width: 12px;
    border: 6px solid transparent;
    border-right: 6px solid #f4bb00;
}

<div></div>

Read this answer for details on how edge manipulation works to produce triangles.