This is a rather old question, but I thought I'd chip in in case anyone is still looking for answers.
If you're not concerned about IE older than 9, transform:rotate should yield better-rendered results (transparent angled gradients can indeed get choppy or get gaps at gradient joins).
You could do this with two rotated divs, or with a single div and associated pseudo element. Here's the CSS:
.rotatedDiv {
position: absolute;
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
}
#extradiv1 {
top: 20px;
right: -30px;
width: 200px;
height: 20px;
background: rgb(255,204,51);
}
#extradiv2 {
position: absolute;
top: 0;
right: -20px;
width: 170px;
height: 20px;
background: rgb(22,22,22);
}