是否可能仅使用CSS来复制此图像?
我想将其应用于我的菜单,因此在hover
实例上出现棕色背景。
我不知道该如何做到这一点,我只有:
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
是否可能仅使用CSS来复制此图像?
我想将其应用于我的菜单,因此在hover
实例上出现棕色背景。
我不知道该如何做到这一点,我只有:
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
对父元素进行 skew
(即倾斜)(在此示例中为 li
),并 反向倾斜 其子元素:
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>
这里提供一个可以在不同浏览器上使用的代码示例 - 我只用了几分钟时间就创建了它。
尝试调整参数,我使用了:before
和:after
来实现这个效果。
:before
和:after
。 - Dontransform: skew(X, Y)
属性来实现这一效果。创建一个倾斜的外部容器,然后在内部容器上相反的方向倾斜同样的角度以使文本保持水平。请参见此示例;http://jsfiddle.net/UZ6HL/4/
从您所说的,我认为这就是您想要的效果,如果不是,请说明何时应该显示背景。.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>
transform: skew(20deg, 0deg);
旁边添加-ms-transform: skew(20度,0度);
。clip-path
来制作类似这样的效果。
例如:
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
ul {
display: flex;
width: 100%;
flex-direction: row;
gap: 20px;
background: #000;
padding: 0 10px;
justify-content: flex-end;
}
li {
list-style-type: none;
clip-path: polygon(20% 0%, 100% 0, 80% 100%, 0% 100%);
background: blue;
padding: 10px 50px;
}
a {
color: #fff;
}
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
</ul>
注意:SPAN 不受 transform CSS 功能的影响,因此您需要使用 DIV 或将 span 更改为 display: block; 否则它们将不受影响。
所以只需将文本放在单独的 div 中并取消倾斜即可。
示例包装器 div 如下:
transform: skewx(35deg)
但文本 div 是:
transform: skewx(-35deg);
这里是 CodePen: https://codepen.io/dmitrisan/pen/NWaYEzV
display:inline-block;
在IE8或更早版本中不起作用...所以我加了一些*float:left;
的hack来让它在IE上“内联”。但是当我在菜单上悬停时(在IE8上),我无法设置一些正常的背景(没有倾斜)。有什么建议吗? - Preston<span>
中并执行相同的操作。 - Roko C. Buljanspan
子元素的偏斜。不得不使用div
代替。可能与display
属性有关,但不确定。 - Slion