[Solved] css custom border style (triangles or arrows)

by


To obtain multiple ‘triangles’ around a single element as you have indicated with your example, I think your only option is the border-image property

JSFiddle Demo

CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:250px;
    height:300px;
    margin:25px;
    border-style: solid;
    border-width: 13px 14px 14px 12px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
}

NB. This property requires you to have a ‘base’ image to work from.

W3C

CanIUse.com

Border Image Generator

3

solved css custom border style (triangles or arrows)