在网页底部分页看到这样的效果是不是看上去还不错？下面就来看看这是如何实现的吧~

第一种方法：利用border

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

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

CSS

#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 版本的代码，其他预处理代码类似

//三角形的宽高
$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 {
    @includetriangle();
    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 进行了歪曲，导致中间的文字也是倾斜的，而这显然不是我们所要的效果。所以我们需要加一个内层元素，并对内层元素做一次逆向的歪曲，从而得到我们想要的效果：

实现代码如下

<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 来得到平行四边形。总体来说，第二种方法相对于第一种代码量小得多，而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。希望本文对各位有所帮助。

时制作网站导航时，经常用到鼠标悬停展现下拉菜单的效果。在此记录一下实现过程，需支持CSS3浏览器运行。

首先看下实现的效果：

html部分：

 <ul class="navbar-nav ml-auto">
	<li class="nav-item hvr-underline-from-left nav-item1"><a class="nav-link hvr-icon-spin fa-caret-down" href="/solutions/">建站推广方案</a>
	<div class="list-group shadow-sm ">
		<a class="list-group-item list-group-item-action" href="/solutions/diagnosis/">分析 - 诊断分析/营销定位</a><a class="list-group-item list-group-item-action" href="/solutions/customize/">网站 - 定制品牌营销网站</a><a class="list-group-item list-group-item-action" href="/solutions/sem/">流量 - Google SEM 广告引流</a><a class="list-group-item list-group-item-action" href="/solutions/seo/">转化 - SEO优化+网站运维</a><a class="list-group-item list-group-item-action" href="/solutions/social/">社交 - Facebook/Youtube 运营推广</a><a class="list-group-item list-group-item-action" href="/solutions/training/">培训 - 线上线下课程免费送</a>
	</div>
	</li>
	<li class="nav-item hvr-underline-from-left nav-item2"><a class="nav-link " href="/cases/">成功案例</a>
	</li>
</ul>

重点CSS部分：

.nav-menu .navbar-collapse>.navbar-nav>li>.list-group {
	position: absolute;
	z-index: 1070;
	width: auto;
	left: 0;
	overflow: hidden;
	height: auto;
	max-height: 0;// 最大高度初始为0
	transition: all .3s ease; //效果时间 0.3s
	visibility: hidden;
}
.nav-menu .navbar-collapse>.navbar-nav>li:hover>.list-group,.nav-menu .navbar-collapse>.navbar-nav>li>a:hover +.list-group {
	max-height: 100vh; // 鼠标悬停时最大高度尽量大点，就有向下展开的动画效果
	visibility: visible;
	height: auto;
}

我的代码引用了 bootstrap v4 所以有些class 都是层叠覆盖写法。