Html CSS3变换使一侧倾斜

是否可以创建“CSS3变换一侧倾斜”

我找到了一个解决方案，但它对我没有用处，因为我需要使用图像作为背景（而不是颜色）

---

即使这样也没有用（倾斜区域应该是透明的）

您尝试使用

：在
非常接近之前，您唯一需要更改的是使用倾斜而不是边框：

编辑：您的边框方法也会起作用，您唯一做错的事情就是在div顶部有before元素，所以透明边框没有显示出来。如果您将伪元素放在div的左侧，那么一切都会正常工作：
试试这个：

要取消倾斜图像，请为图像使用嵌套div，并为其指定相反的“倾斜”值。因此，如果父对象上有20deg，那么可以给嵌套（图像）div一个-20deg的歪斜值


.container{
溢出：隐藏；
}
#平行四边形{
宽度：150px；
高度：100px；
利润率：0-20px；
-webkit变换：倾斜（20度）；
-moz变换：倾斜（20度）；
-o变换：倾斜（20度）；
背景：红色；
溢出：隐藏；
位置：相对位置；
}
.形象{
背景：url(http://placekitten.com/301/301);
位置：绝对位置；
顶部：-30px；
左：-30px；
右：-30px；
底部：-30px；
-webkit变换：倾斜（-20度）；
-moz变换：倾斜（-20度）；
-o变换：倾斜（-20度）；
}
我知道这很旧，但我建议使用线性渐变来实现相同的效果，而不是边距偏移。这将在其原始位置保留任何内容


HTML

<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

可以使用“变换”和“变换原点”来实现

将各种变换组合在一起会得到类似的结果。我希望这对您有所帮助。：）
有关更简单的转换，请参见这些示例。这留下了一点：


div{
宽度：300px；
高度：200px；
背景图片：url数据（数据：数据：图像/gif；基础64，数据（数据：数据：数据：数据：数据：数据：数据：图像/数据：图像/gif；基础64，基础64，数据数据：数据：数据：数据：数据：数据：图像/数据：图像/数据：数据：数据：数据：数据：数据：图像/数据：数据：数据：数据：图像/数据：数据：数据：数据：数据：数据：数据：数据：图像/数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：图像/数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：图像/基础64；基础64；基础64；基础64，基础64，基础64，数据，数据，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层，数据层TE4.vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv55CIPLUKWLQQMAEJG0ENAGAYHUAWRHSCFC14KZURVKLSPZBMYDPCGAAAPBQEU+ABCCFy3c+TGSXCAAEMIBCLUV3BDY8LsFEOCAKBIEHBEI0WKWKWDRIX5PYQJJFYEAWKKKKKKKKKKKKKKKKWKKKKKKKK4NKKKKKKKKKKKKKJJJJJKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKYzoqdlbHfxI0Ehkjioffqaheav1LKxGqRfKYRqelvKbavJn0nwaidihaagckkCsAbr6RqCfkCfkEwyJqArC7GzP9Uvitooiqwauic6Kkmnuroo5GkKllFzQ6WyZqRqRpx26UmQqQQqRqLqLqLqLqRqLqLqLqLqLqLqLqLqLqLbqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqLqRqLqLqLqR；
-webkit变换：透视（300px）旋转（-30度）；
-o变换：透视（300px）旋转（-30度）；
-莫兹变换：透视（300px）旋转（-30度）；
-webkit转换来源：100%50%；
-moz变换原点：100%50%；
-o-变换-原点：100%50%；
变换原点：100%50%；
利润率：10px 90px；
}
也许您想使用CSS“剪辑路径”（适用于透明和背景）

“剪辑路径”参考：

发电机：

例如：


/*带百分比*/
.元素百分比{
背景：红色；
宽度：150px；
高度：48px；
显示：内联块；
剪辑路径：多边形（0,100%0%，75%100%，0%100%）；
}
/*带像素*/
.元素像素{
背景：蓝色；
宽度：150px；
高度：48px；
显示：内联块；
剪辑路径：多边形（0,100%0%，计算（100%-32px）100%，0%100%）；
}
/*有背景*/
.元素背景{
背景：url(https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)无重复中心/盖；
宽度：150px；
高度：48px；
显示：内联块；
剪辑路径：多边形（0,100%0%，计算（100%-32px）100%，0%100%）；
}





这几乎完成了我需要的工作，但这里的倾斜也会使背景图像倾斜，是否有任何修复方法。无论如何，添加了+1谢谢：）@darthmaim的答案（下面）使用psuedo（之前或之后）来倾斜内边框应该是可以接受的答案。不需要任何额外的包装器元素。
<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

/* reset */
ul, li, a {
    margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
    display: inline-block;
    text-align: center;
}
/* appearance styling */
ul {
    /* hacks to make one side slant only */
    overflow: hidden;
    background: linear-gradient(to right, red, white, white, red);
}
li {
    background-color: red;
     transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
}
li a {
    padding: 3px 6px 3px 6px;
    color: #ffffff;
    text-decoration: none;
    width: 80px;
     transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    -webkit-transform:skewX(20deg);
}