如何巧妙用CSS做各种三角形教程详解

CSS代码:

/***三角形****/
#triangle-up {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

}

#triangle-down {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

}
#triangle-left {

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-right: 100px solid red;

    border-bottom: 50px solid transparent;

}
#triangle-right {

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-left: 100px solid red;

    border-bottom: 50px solid transparent;

}

/***直角三角形****/
#triangle-topleft {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}
#triangle-topright {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-left: 100px solid transparent;

}



#triangle-bottomleft {

    width: 0;

    height: 0;

    border-bottom: 100px solid red;

    border-right: 100px solid transparent;

}


#triangle-bottomright {

    width: 0;

    height: 0;

    border-bottom: 100px solid red;

    border-left: 100px solid transparent;

}

HTML代码:

<div id="triangle-up"></div>
<div id="triangle-down"></div>
<div id="triangle-left"></div>
<div id="triangle-right"></div>

<div id="triangle-topleft"></div>
<div id="triangle-topright"></div>
<div id="triangle-bottomleft"></div>
<div id="triangle-bottomright"></div>

效果图:按上面次序

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注