title: Creating an arrow for a div in css
body: <p>Hi guys so i am trying to create a small arrow for a div box , like this: <a href="https://i.stack.imgur.com/2ovCv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ovCv.jpg" alt="enter image description here"></a></p>
  
  <p>I got my pictures to overlap but i have no idea how to create that small arrow which points to the big picture </p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="row"&gt;
          &lt;div class="col-md-10"&gt;
          &lt;div class="imageDiv"&gt;&lt;/div&gt;
          &lt;div class="imageDiv bottomDiv"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.imageDiv {
      margin-top: 70px;
      background: #fff;
      display: block;
      width: 555px;
      height: 455px;
      padding: 10px;
      border-radius: 2px 2px 2px 2px;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }
  .bottomDiv {
      position: relative;
      bottom: 460px;
      left: 404px;
      width: 295px;
      height: 295px;
      background: black;
  }
  </code></pre>
  
  <p>Fiddle <a href="http://jsfiddle.net/aw8RD/1853/" rel="nofollow noreferrer">link</a></p>
  
  <p>Any help on creating this would be great, Also i am using bootstrap for mobile responsive , and i was also wondering when the screen gets smaller would it be a better idea to move the yellow box below the picture? or just make everything smaller? iam pretty sure i will use media queries but haven't decided what to do yet </p>
  
  <p>Thanks again </p>