77

CSSのみでこの画像を再現することは可能でしょうか？

ここに画像の説明を入力

これをメニューに適用したいので、茶色の背景がhoverインスタンスに表示されます

これを行う方法がわかりません。

.menu li a:hover{
     display:block;
     background:#1a0000;
     padding:6px 4px;
}
4

7 に答える 7

145

skew親要素 ( LI) とその子要素の逆スキュー

CSS メニューの歪んだボタンの斜めの境界線

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s, color 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

于 2013-07-30T13:12:21.970 に答える
10

これは、さまざまなブラウザーで使用するためのフィドルです。私は数分で作成しました。

:beforeこれを行うためにとを使用した引数で遊んでみてください:after。

https://jsfiddle.net/DTBAE/

于 2013-07-30T13:08:27.920 に答える
6

transform: skew(X, Y)プロパティを使用してこれを実現できます。斜めの外側のコンテナーを作成し、内側のコンテナーで反対の量を傾けて、テキストをまっすぐに戻します。たとえば、このフィドルを参照してください。

http://jsfiddle.net/UZ6HL/4/

あなたが言ったことから、これはあなたが望むものだと思います。そうでない場合は、アイテムがいつ背景を表示すべきかを明確にしてください.

于 2013-07-30T13:03:12.147 に答える
3 

.skew {
  background: green;
  color: #fff;
  padding: 50px;
  transform: skewX(-7deg);
  font-size: 20px;
  font-weight: 700;
}

.skew p {
  transform: skewX(7deg);
}
<div class="skew">
  <p>This is caption</p>
</div>

これが例です

于 2017-06-23T08:27:42.067 に答える
0

注: SPAN は変換 CSS 機能の影響を受けないため、display: ブロックには DIV またはスパンの変更が必要になります。それ以外の場合は影響を受けません。

そのため、TEXT を別の div 内に配置して、それをまっすぐにします。

ラッパー div の例は次のとおりです。

 transform: skewx(35deg)

しかし、テキスト div は次のとおりです。

transform: skewx(-35deg);

コードペンはこちら: https://codepen.io/dmitrisan/pen/NWaYEzV

于 2022-01-02T15:39:52.710 に答える