html - "cut" a div after rotation? -

i have created message tool tip :

but consists of image of :

and regular div right. (with text inside)

however , prefer not image. want create triangle part rotated div.

i've managed here creating simple div , rotate it:

   transform: rotate(45deg);   -ms-transform: rotate(45deg); /* ie 9 */   -webkit-transform: rotate(45deg); /* safari , chrome */ 

and result :

however (and question) -- can remove right part of rotated div , i'll have :

is possible ?

p.s. - know thtat can hide right part div using div position relative/absolute. want know if there solution removing right part. (or maybe , there code create triangle ?). lets assume angle 90 deg. in red div.

you can without rotating element, wrap inside position relative element, , use position absolute set right

demo

.left {     width: 0;      height: 0;      border-top: 10px solid transparent;     border-bottom: 10px solid transparent;     border-right:10px solid #001744;  }