Arrows using CSS only

Asked

Viewed 4,037 times

12

I would like to know if it is possible to do the following arrow using CSS only:

inserir a descrição da imagem aqui

I usually do other types of arrows, using CSS, but whenever I struggle with cases like this, where the arrow has a transparent background, I end up using images.

css css3
  • 2

    You can use the character > with ::after have you tried?

  • Complementing Sergio above: element::after { content: ">";}

  • They usually use the icons as a source.

  • Had done so, however, the font gets very different, and the designers here from the company piram kkk

  • Use it as background then. element::after { content:""; width: 15px; height: 15px; background: camiodaimagem no-repeat center;} Knowing that the image should be saved with transparent background.

  • Yes yes, it would be the way the friend quoted below, wanted to see how to do without image even, but thanks anyway! : D

Show 1 more comment

2 answers

18


Using CSS I would do so, styling the way you want.

.seta {
  position: absolute;
  padding: 3rem; /* Arrow size */
          box-shadow: 1px -1px 0 1px red inset;
  -webkit-box-shadow: 2px -2px red inset;
  border: solid transparent;
  border-width: 0 0 2rem 2rem;
  transition: 0.2s;
}

.seta-direita { transform:rotate(225deg) }
<div class="seta seta-direita"></div>

  • 1

    Holy shit! :the

  • +1 - great balcony. =)

6

Try this:

html, body {font-size: 14px}
button {
    background-color: transparent;
    border: 0.1em solid #000;
    outline: none;
    padding: 0.75em 1em;
    text-transform: uppercase;
}
button:hover {cursor: pointer}
button:after {
    border-right: 0.1em solid #000;
    border-bottom: 0.1em solid #000;
    content: "";
    display: inline-block;
    height: 1em;
    vertical-align: bottom;
    width: 1em;

    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
<button type="button" role="button"> Ver mais projetos </button>

Browser other questions tagged css css3

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