css写的3角形赏析

2021-01-20 13:33 jianzhan

今日闲着蛋疼 随意修几个3角形

<div class="top"></div>

<div class="left"></div>

<div class="right"></div>

<div class="down"></div>

<style type="text/css">

.top,

.left,

.right,

.down{

width:0;

height:0;

line-height:0;/*处理ie下梯形难题*/

border:15px solid transparent;

_border:15px solid #fff;/*ie6 不适用边框全透明(显示信息为黑色) 因此只能让边框跟情况同色*/

}

.top{ border-bottom-color:#f00; }

.left{ border-right-color:#0f0; }

.right{ border-left-color:#00f; }

.down{ border-top-color:#0ff; }

</style>