html - Make the right side of a div as an arrow

Question

I have a simple div on a page:

<div>Some Text</div>

Is it possible, with CSS, to make it finish as an arrow. Something like:

UPDATE

This is the result I see with web-tiki proposed solution:

See the cuts on the arrow?

Thank You, Miguel

Answer 1

---

EDIT : If you need the arrow to adapt to the height of the text (considering it can display on several lines) You can use linear-gradient background for the arrow.

FIDDLE

---

This can make it :

FIDDLE

CSS :

div{
    height:40px;
    background:red;
    color:#fff;
    position:relative;
    width:200px;
    text-align:center;
    line-height:40px;
}
div:after{
    content:"";
    position:absolute;
    height:0;
    width:0;
    left:100%;
    top:0;
    border:20px solid transparent;
    border-left: 20px solid red;
}