用 CSS 实现三角形与平行四边形

本文最初发布于个人我的博客：咀嚼之味

最近在逛某个技术网站的时候，感受文章关键词上的样式好酷炫啊。因而我将那种写法照搬到了个人博客中，也许最近逛过我博客的小伙伴已经发现了它出如今哪儿了——分页的样式。来张截图：

你在首页的底部也能够看到这样一个分页栏；是否是看上去还不错？下面就来看看这是如何实现的吧~

第一种方法：利用border

第一种方法是借助border属性 hack 出三角形，而后经过一个矩形拼接两个三角形最终制造出一个平行四边形。为何使用border能够产生三角形呢？先来看看一张图片：

看了图中的三个小图形的变化过程，你应该已经清楚了一半。其实 hack 出三角形只须要两个条件，第一，元素自己的长宽为0；其次，将不须要的部分经过 border-color 来设置隐藏。经过相似的方法，你还能够创造出梯形，上图中的三个图形的代码以下。（另附 CodePen 示例）

#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

接下来就要考虑如何拼接出一个平行四边形了。在border法中，它由三部分组成，分别是左三角形、矩形、右三角形。若是每次绘制平行四边形都要建立三个元素显然过于麻烦了，因此在这里:before和:after伪元素是个不错的选择。下面咱们实现一下这样的效果：

为了将三角形与矩形无缝拼接到一块儿，多处属性要保持一致，因此使用相似 Less, Sass, Stylus 等 CSS 预处理器来写这段代码会更容易维护，下面给出 Scss 版本的代码。（另附 CodePen 连接）

//三角形的宽高
$height: 24px;
$width: 12px;

//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}

//单个三角形的样式
@mixin triangle() {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}

//平行四边形的样式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;

  &:after {
    @include triangle();
    right: -$width;
  }

  &:before {
    @include triangle();
    left: -$width;
  }

  @include parallelogram-color(red);
}

须要注意的是，若是经过 $height、$width 设置的三角形斜率过小或太大都有可能形成渲染出锯齿，因此使用起来要多多测试一下不一样的宽高所获得的视觉效果如何。

第二种方法：利用transform

使用transform来实现平行四边形的方法是我在逛去啊的时候看到的，效果大概是这个样子：

看到以后以为好神奇啊，原来还能够只有平行四边形的外轮廓。（由于方法一只能创造填充效果的平行四边形）实现起来很是简单，主要是借助了transform: skew(...)，下面就来看看源码吧。

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>

<div class="city">上海</div>

因而咱们获得了这样的效果：

看到图片的你必定是这样想的：

别着急嘛，咱们的确是把整个 div 进行了歪曲，致使中间的文字也是倾斜的，而这显然不是咱们所要的效果。因此咱们须要加一个内层元素，并对内层元素作一次逆向的歪曲，从而获得咱们想要的效果：

实现代码以下，另附 CodePen 示例

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}

.city div {
  transform: skew(20deg);
}
</style>

<div class="city">
  <div>上海</div>
</div>

总结

第一种方法使用 border 属性 hack 出三角形，并经过对三个元素进行拼接最终实现了平行四边形；而第二种方法则经过 transform: skew 来获得平行四边形。整体来讲，第二种方法相对于第一种代码量小得多，并且也很好理解。惟一的不足是没法构造像本站的分页中所使用的梯形。但愿本文对各位有所帮助。

UPDATE

• **2015.8.18**, @前端农民工 给出了一个 CSS-Tricks 的连接，是关于各类用 CSS 绘制几何图形的方法，浅显易懂，推荐你们看看！