Home/ Questions/Q 8842931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T11:05:23+00:00

I’m trying to create a box with an arrow in css and here is

  • 0

I’m trying to create a box with an arrow in css and here is my results so far: http://dabblet.com/gist/4079318

As you can see, the gradient is not applied correctly to the arrow, and it used additional markup for the arrow. Does anyone else have a better solution?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use a rotated pseudo-element with a diagonal gradient:

    .fancy-arrow:after {
  content:"";
  display:block;
  width:25px;height:25px;
  background:#f00;
  position:absolute;
  right:-12px;top:5px;

  background: -webkit-linear-gradient(left top,  #7d7e7d 0%,#0e0e0e 100%); 
  -webkit-transform:rotate(45deg);
  z-index:-1;
}

    for demonstration purposes only with webkit prefixes. The same could be achieved in IEs with some filter-magic.

    working Demo

    • 0