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

Answer 2

Check This

DEMO

HTML

<div class="text">Some Text<span class="arrow"></span> </div> 

CSS

.text {     background-color:#ff0000;     color:#fff;     display:inline-block;     padding-left:4px; } .arrow {     border-style: dashed;     border-color: transparent;     border-width: 0.20em;     display: -moz-inline-box;     display: inline-block;    /* Use font-size to control the size of the arrow. */     font-size: 100px;     height: 0;     line-height: 0;     position: relative;     vertical-align: middle;     width: 0;     background-color:#fff;   /* change background color acc to bg color */      border-left-width: 0.2em;     border-left-style: solid;     border-left-color: #ff0000;     left:0.25em; }