CSS Button with both Radius and Arrow, Possible?

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.

IMAGE OF WHAT THE BUTTONS LOOK LIKE ON THE PSD.


solution

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;
}