css 如何改变其余的背景色时，文字是旋转与它

xqkwcwgp 于 2023-08-08 发布在其他

关注(0)|答案(1)|浏览(105)

我有一个导航栏，我需要旋转的话。这就是我所做的，但是当我旋转它的时候，它会被旋转，即使是悬停，然后有这些背景色的小空间，这些是原始的颜色。如何将其余空间更改为黑色？
下面是一张图片：https://i.stack.imgur.com/KbEGm.png

.navbar {
  background-color: chocolate;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 5em;
  line-height: 70px;
}

/* Styly pro odkazy v navbaru */

.navbar a {
  color: white;
  padding: auto;
  text-decoration: none;
  font-size: 1.25em;
  flex: 1;
  transform: rotate(-10deg);
}

/* Styly pro odkazy při najetí myší */

.navbar a:hover {
  background-color: black;
  color: white;
}

个字符

css

来源：https://stackoverflow.com/questions/76847529/how-to-change-the-rest-of-background-color-when-words-are-rotated-with-it

1条答案

按热度按时间

5gfr0r5j1#

您可以使用伪元素（例如:after），并使用z-index: -1;将其放置在下面

.navbar {
  background-color: chocolate;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 5em;
  line-height: 70px;
}

/* Styly pro odkazy v navbaru */

.navbar a {
  color: white;
  padding: auto;
  text-decoration: none;
  font-size: 1.25em;
  flex: 1;
  transform: rotate(-10deg);
}

/* Styly pro odkazy při najetí myší */

.navbar a:hover {
  color: white;
}

.navbar a:hover:after {
    content: "";
    display: block;
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    transform: rotate(10deg);
    z-index:-1;
}

个字符

赞(0）回复(0）举报 2023-08-08

我来回答

css 如何改变其余的背景色时，文字是旋转与它

1条答案

相关问题

热门标签

最新问答