我想像这样倾斜我的菜单项:
我找到了一些解决方案,可以让我倾斜所有 4 个角,但它们使用的是 border-top 解决方案,而我需要使用背景图像解决方案,因为有渐变。
有人知道怎么做吗?
每个角落都无法自由移动,但您可以结合skew
、rotate
和transform-origin
来创建许多不同的效果。 这里有一个类似于您分享的图片的演示。
如果您需要更复杂的内容,最好使用SVG。
你可以为每个区域建立单独的渐变
div {
width: 400px;
height: 200px;
background-image: linear-gradient(6deg, blue 19%, transparent 10%),
linear-gradient(80deg, green 12%, transparent 10%),
linear-gradient(175deg, red 18%, transparent 10%),
linear-gradient(275deg, yellow 18%, transparent 10%),
linear-gradient(6deg, lightblue 21%, transparent 10%),
linear-gradient(80deg, lightgreen 13%, transparent 10%),
linear-gradient(175deg, lightcoral 21%, transparent 10%),
linear-gradient(275deg, lightyellow 19%, transparent 10%);
}