: CSS-only Polygonal Border For example, how could I recreate the "Ask Question" button in pure CSS without images? There is this method here but I'm looking for a normal no-fill stroke-only

@Chiappetta793

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.



.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.

Vote Up Vote Down

@Turnbaugh909

Can do it with 2 divs and before and after pseudo classes.....

jsFiddle



HTML:

<div class="container">
<div>
Test Container
</div>
</div>


CSS:

.container{
width: 200px;
background: #FFFFFF ;
border: 1px solid #f00 ;
border-left: none;
padding: 4px;
position: relative;
min-height: 40px;
}

.container > div {
line-height: 40px;

/*text styles */
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
color: #aaa ;
}

.container:after,
.container:before,
.container > div:after,
.container > div:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}

.container > div:after {
top: 0;
border-color: transparent transparent transparent #fff;
border-width: 24px;
}
.container > div:before {
top: -1px;
border-color: transparent transparent transparent #f00;
border-width: 25px;
}


.container:after {
left: -48px;
border-color: transparent #fff transparent transparent;
border-width: 24px;
}
.container:before {
top: -1px;
left: -50px;
border-color: transparent #f00 transparent transparent;
border-width: 25px;
}


This is untested in anything but Chrome 37/Mac.
I'm not really certain if all that CSS is better than SVG.

Vote Up Vote Down