CSS Button with both Radius and Arrow, Possible? - html

Question

I'm creating a site where I need both of these styles on the same button. I need a radius on the left hand side with the right hand side being an arrow. I've tried a few things. example the old fashioned background image with it aligned right for the arrow. Adding the web-kit radius to the button which didn't work out to good.
In the past I'd create the button as a back ground image. But with CSS3 and a bit of magic I'm sure there's a much better way to achieve this?
Anyone got a cleaner solution to the problem? I've had a google with a few coffee's But nothing quite does what I'm trying to do.
-I'm using bootstrap 2.3 has a framework so this would need to work on as many browsers as possible and at multiscreen resolutions.

Answer 1

This is possible through usage of the :before/:after pseudo elements.
jsFiddle here - Basic example
HTML - pretty simple
<div></div>
CSS
div {
width: 200px;
height: 50px;
background: black;
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:before {
content: '\A';
position: absolute;
right: -20px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid black;
z-index: 10;
}
div:after {
content: '\A';
position: absolute;
right: -30px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid blue;
}

Answer 2

I modified code above to achieve the goal you want: exactly the same as on your picture
HTML
<div id="div1"></div>
<div id="div2"></div>
CSS
body {
background: blue;
}
#div1 {
width: 200px;
height: 50px;
background: black;
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
z-index: 9;
}
#div1:before {
content: '\A';
position: absolute;
right: -28px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid black;
z-index: 10;
}
#div1:after {
content: '\A';
position: absolute;
right: -38px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid white;
}
#div2 {
width: 20px;
height: 50px;
background: white;
left: 196;
top: 8;
position: absolute;
}