Arrows using CSS only

Navigation
11

I would like to know, if possible, to make the following arrow using only CSS:

I use to make other types of arrows, using CSS, but whenever I deal with cases like this, where the arrow has a transparent background, I use images.

    
asked by anonymous 12.11.2014 / 20:01

2 answers

17

Using CSS I would do so, styling anyway 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>
    
12.11.2014 / 20:07
4

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>
    
27.08.2015 / 14:31
What is the var difference between Kotlin and Java? When should I inactivate or delete a record? Good database practices