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?

Improve this question
6
  • Don't think it can be done with one object other than utilizing before and after pseudo classes.
    – Scott
    Jul 24, 2014 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, 2014 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, 2014 at 9:17
  • ...and: doesn't this question belong at Stack Overflow?
    – Vincent
    Jul 25, 2014 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, 2014 at 10:03

2 Answers 2

Reset to default
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.

Improve this answer
1
  • 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, 2014 at 19:54
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.

Improve this answer
1
  • Nice solution, thanks! The ability to also have a transparent background is exactly what I was looking for.
    – Xavier
    Jul 25, 2014 at 10:02

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.