CSS的强大之处在于可以通过各种技巧实现各种奇妙的效果。其中，拉伸三角就是一种很常见的技巧，可以为网站的导航条、标签页、菜单栏等元素增加一些美观的装饰。下面就来介绍一下如何使用CSS实现拉伸三角。

.nav {position: relative;padding-left: 20px;padding-right: 20px;height: 50px;line-height: 50px;background-color: #ffffff;font-size: 16px;font-weight: bold;}.nav:before {content: "";position: absolute;top: 0;left: 0;height: 0;width: 0;border-top: 25px solid #ffffff;border-right: 25px solid transparent;}.nav:after {content: "";position: absolute;top: 0;right: 0;height: 0;width: 0;border-top: 25px solid #ffffff;border-left: 25px solid transparent;}

上面的代码中，首先定义了一个类.nav，这个类表示导航栏。为了达到拉伸三角的效果，我们需要使用伪元素:before和:after，分别表示左侧和右侧的三角形。

接下来，为伪元素设置样式。首先设置其位置为绝对定位，即与导航栏重叠，并使其顶部与导航栏顶部对齐。然后分别为左三角和右三角设置边框。注意到边框的（初始）高度为0，这是因为边框的高度可以随时通过JavaScript来动态设置。

最后，要注意的是，我们需要将导航栏的背景色设置为白色。这样可以使三角形的底边和导航栏的顶边融为一体，从而形成连贯的视觉效果。