在網頁底部分頁看到這樣的效果是不是看上去還不錯？下面就來看看這是如何實現的吧~

第一種方法：利用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 都是層疊覆蓋寫法。