4

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?

  • Don't think it can be done with one object other than utilizing before and after pseudo classes. – Scott Jul 24 '14 at 23:20
  • Psuedo-classes would be fine, I think. I just don't want to cram a bunch of SVG into my stylesheets – Xavier Jul 24 '14 at 23:22
  • I believe this is possible with just pure css. At least I thought it was, the first time I saw it. Turns out it's a png background. – Vincent Jul 25 '14 at 9:17
  • ...and: doesn't this question belong at Stack Overflow? – Vincent Jul 25 '14 at 9:56
  • 1
    I agree, zelv, that it's an issue that's still debated :) Note that I didn't vote for migration. Personally, I'd like to have Q's like these, not in the least because SO could be more... welcoming. – Vincent Jul 25 '14 at 10:03
3

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.

  • Nice solution, thanks! The ability to also have a transparent background is exactly what I was looking for. – Xavier Jul 25 '14 at 10:02
5

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

jsFiddle

enter image description here

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.

  • Wrote the code for my answer and then came back to gd.se and noticed it's fundamentally the same as yours. .. :/ We apparently write css similarly, because I swear that I didn't look at your code before writing mine. Then again there aren't that many ways to write it, unless you're super chaotic with it. Here's my Jsfiddle. – Joonas Jul 28 '14 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.