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
Preview
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.
Sponsored Links