html - Straight line with bottom arrow - possible in CSS only? -

is possible achieve (straight line "cut" kind of arrow / triangle 30 pixels left) in css? (did using adobe fireworks want rid of images as possible on website).

here have tried without success: http://jsfiddle.net/u8af6/

many thanks

css

body { background: red; }  .arrow_box {     position: relative;     background: #88b7d5;     border: 1px solid #c2e1f5; } .arrow_box:after, .arrow_box:before {     top: 100%;     left: 10%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none; }  .arrow_box:after {     border-color: rgba(136, 183, 213, 0);     border-top-color: red;     border-width: 16px;     margin-left: -16px; } .arrow_box:before {     border-color: rgba(194, 225, 245, 0);     border-top-color: #c2e1f5;     border-width: 22px;     margin-left: -22px; } 

you can use pseudo elements that. please see nicolas gallagher's experiment more: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

the basic code is:

.triangle:before, .triangle:after {   content: "";   position: absolute;   bottom: -15px; /* value = - border-top-width - border-bottom-width */   left: 30px;   border-width: 15px 15px 0; /* vary these values change angle of vertex */   border-style: solid;   border-color: #aaa transparent; }  .triangle:after {   bottom: -14px; /* -1px of first element border */   border-color: #fff transparent; } 

please see implementation here: http://dabblet.com/gist/11146863 works on solid background.