使用和web绘制三角形实现分析

更新时间：2019-09-02 11:30:21 作者：一夜听春雨

本文主要介绍了小程序及网页绘制三角形的实现分析，文中实例代码非常详细，对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

如图所示：

很多时候都需要用到三角形，比如tib提示，经常需要用到三角形来起到辅助效果，在css样式中，代码如下：

.Trianglebox{ width: 0px; height: 0px; border-style: solid; border-color: transparent blueviolet transparent transparent; border-width: 100px; }

页面代码：

要了解的主要属性是： - 设置边框样式， - 设置宽度， - 设置颜色

将div的宽高设置为0px，然后设置边框的宽度，-：上，右，下，左，分别设置它们的颜色。如果想让三角形朝左，就设置div的右边颜色，其他边框设置为透明。就这样。

绘制三角形的小程序：

代码：

width: 0rpx; height: 0rpx; border-bottom: 8rpx solid transparent; border-top: 8rpx solid transparent; border-right: 8rpx solid #f6f6f6;

设置底部、顶部和右侧的边框，但不设置左侧的边框，因此三角形将面向左侧。

以上就是本文的全部内容了，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。