CSS-only Polygonal Border

For example, how could I recreate the “Ask Question” button in pure CSS without images?

enter image description here

There is this method here but I’m looking for a normal no-fill stroke-only border.

I’ve been able to do it using inline SVG, but I was hoping there was a way to do it without SVG, using nothing but CSS styles (perhaps something like the border tags in the above question). Does anyone know if this is possible?

Answer

I managed this with just css, with pseudo-elements and the transform: property. It ain’t very pretty, though, and needs some tweaking the numbers to be snug and symmetrical.

enter image description here

.foo {
    display: inline-block;
    padding: 10px 30px;
    border-top: 2px solid orange;
    border-bottom: 2px solid orange;
    margin-left: 100px;
    margin-top: 100px;
    color: white;
}

.foo:after, .foo:before {
    content: " ";
    border-top: 2px solid orange;
    border-right: 2px solid orange;
    display: inline-block;
    position: absolute;
    height: 22px;
    width: 22px;
}

.foo:before {
    transform: rotate(216deg) 
     skewY(20deg);
    margin-left: -42px;
    margin-top: -3px;
}

.foo:after {
    transform: rotate(36deg) 
     skewY(20deg);
    margin-left: 18px;
    margin-top: -3px;
}

Not tested in anything beyond Firefox on W7, and it might not be pixel-perfect in other browsers.

Attribution
Source : Link , Question Author : Xavier , Answer Author : Vincent

Leave a Comment