title: How to make a box with arrow in CSS?
body: <p>How to make a box with arrow in CSS?</p>
  
  <p>Making round corner is easy. but any idea to make the arrow on left side without using image.</p>
  
  <p>Is it possible to make possible with</p>
  
  <p>only  one elements <code>&lt;p&gt;....&lt;/p&gt;</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #ff004e;
    padding: 40px
  }
  p {
    background: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 250px;
    height: 150px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/OVSZJ.jpg" alt="enter image description here"></p>