CSS水平中心、CSS CSSは三角形を描画し、背景画像の位置を調整します

要素位置の水平方向の調整 

width: 300px;
margin: auto;
position: absolute;
left: 0;
right: 0;

 水平調整の背景画像

background-position-x: -600px;//水平方向，同理垂直y也可以调整

 

#triangle03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
    }
#triangle04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right: 50px solid red;
    }
#triangle05{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#triangle06{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 50px solid yellow;
    }

上記のコードは、三角形四つの異なる方向を達成することができます。