ひし形にしたdivをホバー時に背景を変えたい

Question

斜めの線で区切られた横並びのメニューを作ろうとしているのですが、ホバー時の動きをうまく作ることが出来ません。

    <div class="pc_menu_con">
      <div class="pc_menu_box">        
          <a href="#"><div class="pc_menu_cel">TOP</div></a>
          <a href="#"><div class="pc_menu_cel">メニュー</div></a>
          <a href="#"><div class="pc_menu_cel">メニュー</div></a>
          <a href="#"><div class="pc_menu_cel">メニュー</div></a>
          <a href="#"><div class="pc_menu_cel">メニュー</div></a>
          <a href="#"><div class="pc_menu_cel">メニュー</div></a>
          <a href="#"><div class="pc_menu_cel">メニュー</div></a>
      </div>
    </div>

各メニューの間は斜めの線で区切ろうとしています。
また、ホバー時には背景画像を表示しようとしています。

.pc_menu_con {
	width: 100%;
	min-width: 1000px;
	background: url(lib/images/menu_bg00_1.png) repeat-x center center;
	margin: 0 auto;
}
.pc_menu_box {
	width: 1000px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
.pc_menu_box a {
	color: #FFF;
	text-decoration: none;
	font-weight: 700;
}
.pc_menu_cel {
	width: 142px;
	height: 50px;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	position: relative;
}
.pc_menu_cel::before {
	content : "";
	top : 0;
	left : 0;
	position : absolute;
	width: 142px;
	height: 50px;
	box-sizing: border-box;
	transform : skewX(-8deg);
	border-right: 2px solid #FFF;
}
.pc_menu_cel:hover::before{
	background: url(lib/images/menu_bg00_1_on.png) repeat-x;
	content : "";
	top : 0;
	left : 0;
	position : absolute;
	width: 142px;
	height: 50px;
	box-sizing: border-box;
	transform : skewX(-8deg);
	border-right: 2px solid #FFF;
}

こうすると、ホバー時にひし形の背景は出るのですが、テキストが消えてしまいます。
また、左側のボーダーも消えてしまいます。

また、最後のメニューには右側のボーダーは不要なので消したいのですが

.pc_menu_cel::before:last-child{
	border-right:0px;
}

としてもボーダーは消えず

.pc_menu_cel:last-child::before{
	border-right:0px;
}

こうすると全部のボーダーが消えます。

どのように修正したら良いでしょうか?

Answer 1

以下でどうでしょうか。

/* 前略 */

.pc_menu_cel {
    width: 142px;
    height: 50px;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    z-index: 1; /* 追加 */
}
.pc_menu_cel::before {
    content : "";
    top : 0;
    left : 0;
    position : absolute;
    width: 142px;
    height: 50px;
    box-sizing: border-box;
    transform : skewX(-8deg);
    border-right: 2px solid #FFF;
    z-index: -1; /* 追加 */
}
.pc_menu_cel:hover::before{
    background: url(lib/images/menu_bg00_1_on.png) repeat-x;

    /* この部分の重複設定削除 */

}
a:last-child .pc_menu_cel::before{
    border-right: none;
}

---

別案

疑似要素 before を使わずに、a要素を直接 transform で傾ける。
中のテキストも傾いてしまうので、逆に傾けて打ち消す。

.pc_menu_box a {
    transform: skewX(-8deg);
    border-right: 2px solid #FFF;
}
.pc_menu_cel {
    transform: skewX(8deg);  
} 
.pc_menu_box a:hover{
    background: url(lib/images/menu_bg00_1_on.png) repeat-x;
}
.pc_menu_box a:last-child {
    border-right: none;
}

Comments

[winter_pc]

ありがとうございます!
別案のシンプルな方でやってみて希望通りになりました。

Answer 2

よく見ると、.pc_menu_celは一人っ子です。
メニューとして並んでいるのはaの方なので、下記のように最後に並んでいるaを選択してから、孫の線を消すことができます。

a:last-child .pc_menu_cel::before{
    border-right:0px;
}

追記
擬似要素で矩形を作り上から被せているので、テキストが消えているように見えます。テキストを矩形の上にくるようにレイヤーを調整しないといけません。

案として、.pc_menu_celの擬似要素で矩形を作らず、aタグで作成。矩形とテキストにz-indexで調整するのはどうでしょうか？

.pc_menu_box a {
  position: relative; // 追加
}

// .pc_menu_cel::before 変更
.pc_menu_box a::before { 
  z-index: 1; // 追加
}

// .pc_menu_cel:hover::before 変更
.pc_menu_box a:hover::before {  }

// 追加（最後の線を消す）
.pc_menu_box a:last-child::before {
  border: 0;
}

.pc_menu_cel {
  z-index: 3; //追加
}

Comments

[winter_pc]

ありがとうございます！
無事最後のボーダーは消えました。

残りの、テキストが消えてしまう件もよければお願いします。

[Create_NAYU]

追記しました。ご参考ください。

[winter_pc]

ありがとうございます！