CSS绘制三角形和梯形

本文主要是介绍CSS绘制三角形和梯形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

以上效果对应的CSS依次如下，从左往右依次看就很直观了。

.border {width: 30px;height: 30px;margin: 10px;background-color: lightblue;&_1 {border: solid 1px #b160e7;}&_2 {border-top: solid 15px lightcoral;border-right: solid 15px lightgoldenrodyellow;border-bottom: solid 15px lightpink;border-left: solid 15px lightseagreen;}&_3 {width: 0px;height: 0px;border-top: solid 30px lightcoral;border-right: solid 30px lightgoldenrodyellow;border-bottom: solid 30px lightpink;border-left: solid 30px lightseagreen;}&_triangle {width: 0px;height: 0px;background-color: transparent;border-top: solid 30px transparent;border-right: solid 30px transparent;border-bottom: solid 30px lightpink;border-left: solid 30px transparent;}&_trapezoid {background-color: transparent;border-right: solid 30px transparent;border-bottom: solid 30px lightpink;border-left: solid 30px transparent;}
}

总结：

1.想要那个方向的三角形就把它两侧的border设为transparent；同时把width和height设置为0，这样图形就能被border填满了。

2.梯形原理同1，只是需要设置width或者height。如上面的梯形上底为元素的30px；下底为左右border加上底部border的宽度，即30 * 3 = 90px。下面稍微改一下更直观，下底宽度为10 + 20 + 30 = 60px。

border_trapezoid {background-color: transparent;border-right: solid 10px transparent;border-bottom: solid 30px lightpink;border-left: solid 20px transparent;}    

这篇关于CSS绘制三角形和梯形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---