CSS items with border radius and triangle side

Question

Is it possible in css (without images) make items with border radius and triangle side?

Answer 1

You can use an SVG image that will render sharply at any size and will adapt to the element's size, it would look like this...

.button {
  background: #000;
  float: left;
  position: relative;
  color: #999;
  font: 15px/130% Arial, sans-serif;
  padding: 10px 20px;
  clear: both;
  margin: 10px;
  border-radius: 5px 0 0 5px;
}

.button:after {
  content: '';
  display: block;
  width: 10px;
  position: absolute;
  right: -10px;
  height: 100%;
  top: 0;
  background: transparent url('triangle.svg') 0 0 no-repeat;
}

http://jsfiddle.net/Ch7aA/

​This jsfiddle will only work in Webkit because I've inlined the svg so you can understand how it works, but if you load it from an external file it should work fine. Here's the rendering for reference:

Answer 2

have a look at this: http://css-tricks.com/snippets/css/css-triangle/ or this: http://jonrohan.me/guide/css/creating-triangles-in-css/

for the dynamic height, there is a question and answer here: CSS triangle with dynamic height