html实心向右三角形 css 如何在html页面上输出一个左三角形或右三角形呢？

摘要:

下文讲述使用css脚本绘制下左右不同方向的三角形的方法分享,如下所示:

实现思路:

通过使用border边框属性，将其设置为透明，达到三角形的效果

例:

使用css绘制一个左三角形、右三角形

css 绘制 左三角形、右三角形 的示例分享

#triangle-left {

width: 0;

height: 0;

border-top: 80px solid transparent;

border-down: 80px solid transparent;

border-right: 160px solid green;

}

#triangle-right {

width: 0;

height: 0;

border-top: 80px solid transparent;

border-down: 80px solid transparent;

border-left: 160px solid green;

}

css 绘制 左三角形 右三角形 的示例分享