Question

How to make a box with arrow in CSS?

Making round corner is easy. but any idea to make the arrow on left side without using image.

Is it possible to make possible with

only one elements <p>....</p>

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

<p></p>

Answer 1

Like this :

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

Demo : http://jsfiddle.net/sparkup/edjdxjf2/

UPDATE :

It can also be achieved without empty elements with the css property :before

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

Demo : http://jsfiddle.net/sparkup/y89f1te0/

hope it helps