Arrows using CSS only


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


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

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