纯css写三角形/箭头

1，箭头
html:<div class="d1"></div>
css:

.d1{

width: 0;

height: 0;

border-width: 10px;

border-style: solid;

border-color: transparent transparent transparent #339933;

position: relative;

left: 20px;

cursor: pointer;

}

.d1:after{

content: '';

width: 0;

height: 0;

border-width: 10px;

border-style: solid;

border-color: transparent transparent #fff;

position: absolute;

transform: rotate(90deg);

bottom:-10px;

left:-12px;

}

2：三角形
html同上，
css:

.d1{

width: 0;

height: 0;

border-width: 100px;

border-style: solid;

border-color: transparent transparent #339933;//三角形朝上

border-color: #339933 transparent transparent;//三角形朝下

border-color: transparent #339933 transparent transparent;//三角形朝左

border-color: transparent transparent transparent #339933;//三角形朝右

}