站长资源
中国站长网站

css最简单的上下左右三角形

html:

<div class="sj_down"></div>
<div class="sj_up"></div>
<div class="sj_left"></div>
<div class="sj_right"></div>

css:

.sj_down{
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;
}
.sj_up{
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: transparent transparent red transparent;
}
.sj_left{
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: transparent red transparent transparent;
}
.sj_right{
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: transparent transparent transparent red;
}

效果如下:

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » css最简单的上下左右三角形

评论 抢沙发

评论前必须登录!