用纯css创建三角形_使用此免费的Web应用程序创建纯CSS三角形

大力推动使Web成为一个对CSS更友好的地方 。 多年来，从重复的背景到滑动门技术 ， 图像始终是解决浏览器黑客问题的 方法 。 但是现在，使用CSS3 创建图案，图标和特殊效果比以往更加容易。

使用此三角形生成器 ，您可以设计所需的任何三角形的大小和形状 。 它会自动吐出一个CSS类 ，您可以将其应用于任何元素。

在选项面板中，您可以更改三角形的颜色和方向 （上下/左右）。 如果制作斜角三角形，还可以更改三角形的宽度/高度 ，甚至与左/右偏斜相交。

这是迄今为止我见过的最酷的Web应用程序之一。 它托管在Designyourcode上， Designyourcode上有很多出色的博客文章和免费的Web开发工具。

对于所有向后兼容的爱好者，您可以选择在CSS中包含Microsoft.Chroma功能，从而增加了对IE6用户的支持 。 全世界不到百分之一的人甚至使用IE6，但这仍然是一个不错的选择。

要将纯CSS三角形添加到您的网站，只需将带有规则CSS类复制/粘贴到样式表中即可。 然后将此类提供给任何<div>或空块元素。

例如，要制作一个向上的三角形，您需要复制代码并添加如下元素：

<span class="triangle-top"></span>

该<span>也可以是块级元素 ，也可以绝对位于另一个元素内。

可能性是无限的，并且该工具可以提供比CSS border hack 更好的选择 。 要开始使用，只需访问Triangle Web应用并根据您的喜好更改值即可。

翻译自: https://www.hongkiat.com/blog/css-triangle-generator/