纯css写三角形/箭头

1,箭头
html:


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;//三角形朝右

}

你可能感兴趣的:(纯css写三角形/箭头)