title: Draw right arrow using CSS
body: <p>In my project i need to draw rectangle with right arrow and it should be filled with white color background with black color border. I have tried in many ways but i didn't get right arrow with white background and black color border.</p>
  
  <p>I tried follwoing code: </p>
  
  <pre><code>HTML:
  &lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div class="paddingstyleleft right-arrow1"&gt;         
  &lt;div&gt;&lt;span&gt;&lt;img src="images/referral_out.png"/&gt; &amp;nbsp;Referred To&lt;span&gt;
  &lt;div&gt;&lt;strong&gt;Dr.Sarah Willam&lt;/strong&gt;&lt;span class="bandagealign"&gt;&lt;span          class="bandage"&gt;3&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;            
  &lt;div class="datestyle"&gt;&lt;img src="images/Date.png"/&gt;&amp;nbsp;Jul 24th,2016   &amp;nbsp;| &lt;div class="datestyle1 scheduledstatus"&gt;&lt;span   class="spanwaiting"&gt;Scheduled&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;         
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  CSS:
  
  .right-arrow1 {
   display: inline-block;
   position: relative;
   background: white;
   padding: 15px;
   height: 100px;
   padding:25px;
   border-bottom: 1px solid grey;
   width: 285px;
   border: 1px solid black;
   }
  .right-arrow1:after {
  content: '';
  display: block;  
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
  }
  </code></pre>