How to make an arrow pointing down after a section in HTML/CSS -

i want make down arrow on bottom of <section> element. should in middle of bottom. unfortunately have not found methods how css. , can't figure out myself.

here's html:

<div class="down-btn">  <svg class="down-btn-img">   <polyline points="0,0 50,50 100,0" />  </svg> </div> 

try this

.down-arrow {     width: 0;      height: 0;      border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-top: 50px solid red; } 

---

or this

html:

<section style="background: green; border-color: green;">your section</section> 

css:

    section {         margin: 50px;         padding: 50px;         position: relative;     }    section:after {         content: "";         position: absolute;        top: 100%;        left: 50px;        border-top: 50px solid green;        border-top-color: inherit;         border-left: 50px solid transparent;        border-right: 50px solid transparent;      } 

jsfiddle