CSS画三角形集锦_html/css_WEB-ITnose

triangle_up

向上三角形代码：

.tri-up {
border-color: #FFF #FFF #EED2EE #FFF;
border-style: solid;
border-width: 0 60px 100px 60px;
height: 0;
width: 0;
}
.tri-up-transparent {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid #EED2EE;
}

triangle_right

向右三角形代码：

.tri-right {
border-color: #FFF #FFF #FFF #EED2EE;
border-style: solid;
border-width: 60px 0 60px 100px;
height: 0;
width: 0;
}
.tri-right-transparent {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 100px solid #EED2EE;
}

triangle_down

向下三角形代码：

.tri-down {
border-color: #EED2EE #FFF #FFF #FFF;
border-style: solid;
border-width: 100px 60px 0 60px;
height: 0;
width: 0;
}
.tri-down-transparent {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 100px solid #EED2EE;
}

triangle_left

向左三角形代码：

.tri-left {
border-color: #FFF #EED2EE #FFF #FFF;
border-style: solid;
border-width: 60px 100px 60px 0;
height: 0;
width: 0;
}
.tri-left-transparent {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 100px solid #EED2EE;
}

请大家多多鼓励！

版权声明：本文为博主原创文章，未经博主允许不得转载。

查看更多关于CSS画三角形集锦_html/css_WEB-ITnose的详细内容...