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

本文主要是介绍用 CSS 实现三角形与平行四边形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

第一种方法：利用border

一个矩形拼接两个三角形最终制造出一个平行四边形。为什么使用border可以产生三角形呢？先来看看一张图片：

看了图中的三个小图形的变化过程，你应该已经清楚了一半。其实 hack 出三角形只需要两个条件，第一，元素本身的长宽为0；其次，将不需要的部分通过 border-color 来设置隐藏。通过类似的方法，你还可以创造出梯形，上图中的三个图形的代码如下。（另附 CodePen 示例，http://codepen.io/jerryzou/pen/mJYJym ）

#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 链接，http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110）

//三角形的宽高

$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 示例（http://codepen.io/jerryzou/pen/BNeNwV?editors=110）

<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>