html 编码向下三角,编程分享 - HTML 画指向上下左右的三角形

【原创】 HTML 画指向上下左右的三角形

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 black;

}

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid green;

border-bottom: 50px solid transparent;

}

#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid blue;

border-bottom: 50px solid transparent;

}

HTML

效果图

2020-08-31 17:43:41