Arrow CSS Generator

Arrow CSS Generator generates CSS code for creating arrow.
The output CSS code can be easily used by copy and paste.

Sponsored Links

Select the type of arrow (*Customization settings will be reset if changed.)
(For simple triangle, use the Triangle CSS Generator)

Customization

▼ Arrow Direction

px

▼ Arrow Color

Arrow Head Size

Sizing Method:

px
°
px
px

Shaft Size

px

Border

Additional Setting

CSS Code

.arrow {
  display: inline-block;
  width: 100px;
  height: 73.5px;
  background: #000000;
  clip-path: polygon(0 31%, 63.2% 31%, 63.2% 0, 100% 50%, 63.2% 100%, 63.2% 69%, 0 69%);
}

Notes

  • It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
  • The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.

\ Share on SNS /

Sponsored Links

Tools

CSS Generators

UI Parts Generators

HTML Converters

Image Generators