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

Asked

Viewed 658 times

1

How do I do this triangle before the numbers tab? You can do this by manipulating the edges?

inserir a descrição da imagem aqui

html css

1 answer

4


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.

  • 1

    +1 and this "separate element" could be a :before created in CSS (if you want to include the arrow in multiple buttons, without creating additional elements).

  • Yes, it can be a before:

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.