css不规则图形实现原理及代码

闲来无事，我逛了一下 Google Play 网站，注意到他们的选项卡样式并不是通过图片实现的，而是用 CSS 完成的斜边设计。这让我产生了兴趣，于是我想在这里分享一下我对此的理解。

我们来理解 border 的原理。在 CSS 中，我们可以通过设置 border 的样式和颜色来实现各种边框效果。在这个案例中，Google Play 的选项卡样式使用的是一种特殊的 border 设置：

查看代码样式，我们会发现如下的代码：

```css

border-bottom: 24px solid F00;

border-right: 24px solid transparent;

border-top: 24px solid F00;

border-left: 24px solid transparent;

```

以前我以为 border 是个中规中矩的长方形，但现在看来，border 的形状并不是我们常规理解的长方形，而是一种梯形结构。利用这种原理，我们可以制作出斜方向的不规则图片。

接下来，理解 CSS 结构也很重要。在设置这种 border 时，我们需要将元素的高度设置为 0，才能保证边框在同一行显示。如果没有设置高度为 0，边框会按照常规方式垂直排列。当我们设置 height:0 时，边框就会按照我们预期的方式显示。

大家也可以自己尝试这种设置，通过实践可以更好地理解 CSS3.0 中的伪类 :after 和 :before 如何用于构造不规则的图片。这种方式避免了使用较大的图片，使得网页加载更快，更利于优化。

遗憾的是一些老版本的浏览器（如 IE6）并不支持这种 CSS 特性。这些浏览器对于现代网页设计的支持有限，导致许多精彩的设计无法在这些浏览器上完美呈现。尽管现在 IE6 已经逐渐被淘汰，但在某些特定环境下，我们仍然需要考虑到它的兼容性。