是否可以创建“CSS3 Transform Skew One Side”
我找到了一个解决方案,但它对我来说没有用,因为我需要使用图像作为背景(而不是颜色)
#skewOneSide {
border-bottom: 40px solid #FF0000;
border-left: 50px solid rgba(0, 0, 0, 0);
height: 0;
line-height: 40px;
width: 100px;
}
即使这个JsFiddle也没什么用(倾斜区域应该是透明的)
试试这个:
为了 unskew 图像使用嵌套 div 并为其赋予相反的倾斜值。因此,如果父级上有 20deg,那么您可以为嵌套(图像)div 设置 -20deg 的倾斜值。
.container {
overflow: hidden;
}
#parallelogram {
width: 150px;
height: 100px;
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
overflow: hidden;
position: relative;
}
.image {
background: url(http://placekitten.com/301/301);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
示例:
您可以使用
clip-path
CSS 属性,因为它可以使用透明度和背景。
参考:https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
生成器:https://bennettfeely.com/clippy/
演示:
.with-percent {
background: red;
width: 150px;
height: 48px;
display: inline-block;
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
.with-pixel {
background: blue;
width: 150px;
height: 48px;
display: inline-block;
clip-path: polygon(0 0, 100% 0%, calc(100% - 32px) 100%, 0% 100%);
}
.with-pixel-and-background {
background: url(https://images.pexels.com/photos/127028/pexels-photo-127028.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2) no-repeat center/cover;
width: 150px;
height: 48px;
display: inline-block;
clip-path: polygon(0 0, 100% 0%, calc(100% - 32px) 100%, 0% 100%);
}
<div class="with-percent"></div>
<br />
<div class="with-pixel"></div>
<br />
<div class="with-pixel-and-background"></div>
您可以使用变换和变换原点来实现。
组合各种变换会得到相似的结果。我希望你觉得这对你有帮助。 :) 请参阅这些示例以了解更简单的转换。这还有点:
div {
width: 300px;
height:200px;
background-image: url('data:image/gif;base64,R0lGODdhLAHIANUAAKqqqgAAAO7u7uXl5bKysru7u93d3czMzMPDw9TU1BUVFdDQ0B0dHaurqywsLHJyclVVVTc3N5SUlBkZGcHBwRYWFmpqasjIyDAwMJubm39/fyoqKhcXF4qKikJCQnd3d0ZGRhoaGoWFhV1dXVlZWZ+fn7m5uT8/Py4uLqWlpWFhYUlJSTMzM4+Pj25ubkxMTBgYGBwcHG9vbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAHIAAAG/kCAcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4vH7P7/v/gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMnKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8AAwocSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKlS3gBYsZUIESDggAKLBCxiVOn/hQNG2JCKMIz55CiPlUKWLqAQQMAEjg0ENAggAYhUadWvRoFhIsFC14kzUrVKlSpZbmydPCgAAAPbQEU+ABCCFy3c+tGSXCAAIEEMIbclUv3bdy8LSFEOCAkBIEhBEI0fiwkspETajWcSCIhxhDHkCWDrix5pYQJFIYEoAwgQwAhq4e4NpIAhQSoKBIkkTEUNuvZsYXMXukgQAWfryEnT16ZOZEUDiQ4SJ0EhgnVRAi8dq6dpQEBFzDoDHAbOwDyRJwPKdAhQAfWRiBAYI0ee33YLglQeM1AxBAJDAjR338BHqECCSskocEE1w0xIFYBPghVgS1lECAEIwxBQm8Y+WrYG1EsJGCBWkRkBV+HQmwIAIoAqNiSBg48VYJZCzY441U1GhFVagfYZoQDLbhFxI0A5EhkjioFFQAHHeAV1ZINUFbAk1LBZ1cLlKXgQRFKyrQelVHKBaaVJn0nwAAIDIHAAGcKKcSabR6RQJpCFKAbEWYuJQARcA7gZp9uviTooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxirrrLTWauutuOaq66689urrr8AGK+ywxBZr7LHIJqvsssw26+yz0EYr7bTUVmvttdhmq+223Hbr7bfghhtPEAA7');
-webkit-transform: perspective(300px) rotateX(-30deg);
-o-transform: perspective(300px) rotateX(-30deg);
-moz-transform: perspective(300px) rotateX(-30deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
margin: 10px 90px;
}
<div></div>
这有正确的斜点:
div {
width: 300px;
height:200px;
background-image: url('data:image/gif;base64,R0lGODdhLAHIANUAAKqqqgAAAO7u7uXl5bKysru7u93d3czMzMPDw9TU1BUVFdDQ0B0dHaurqywsLHJyclVVVTc3N5SUlBkZGcHBwRYWFmpqasjIyDAwMJubm39/fyoqKhcXF4qKikJCQnd3d0ZGRhoaGoWFhV1dXVlZWZ+fn7m5uT8/Py4uLqWlpWFhYUlJSTMzM4+Pj25ubkxMTBgYGBwcHG9vbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAHIAAAG/kCAcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4vH7P7/v/gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMnKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8AAwocSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKlS3gBYsZUIESDggAKLBCxiVOn/hQNG2JCKMIz55CiPlUKWLqAQQMAEjg0ENAggAYhUadWvRoFhIsFC14kzUrVKlSpZbmydPCgAAAPbQEU+ABCCFy3c+tGSXCAAIEEMIbclUv3bdy8LSFEOCAkBIEhBEI0fiwkspETajWcSCIhxhDHkCWDrix5pYQJFIYEoAwgQwAhq4e4NpIAhQSoKBIkkTEUNuvZsYXMXukgQAWfryEnT16ZOZEUDiQ4SJ0EhgnVRAi8dq6dpQEBFzDoDHAbOwDyRJwPKdAhQAfWRiBAYI0ee33YLglQeM1AxBAJDAjR338BHqECCSskocEE1w0xIFYBPghVgS1lECAEIwxBQm8Y+WrYG1EsJGCBWkRkBV+HQmwIAIoAqNiSBg48VYJZCzY441U1GhFVagfYZoQDLbhFxI0A5EhkjioFFQAHHeAV1ZINUFbAk1LBZ1cLlKXgQRFKyrQelVHKBaaVJn0nwAAIDIHAAGcKKcSabR6RQJpCFKAbEWYuJQARcA7gZp9uviTooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxirrrLTWauutuOaq66689urrr8AGK+ywxBZr7LHIJqvsssw26+yz0EYr7bTUVmvttdhmq+223Hbr7bfghhtPEAA7');
-webkit-transform: perspective(300px) rotateX(-30deg);
-o-transform: perspective(300px) rotateX(-30deg);
-moz-transform: perspective(300px) rotateX(-30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
margin: 10px 90px;
}
<div></div>
transform: 0% 50%;
的作用是将原点设置为元素的垂直中间和水平左侧。所以在图像的左侧部分看不到透视,所以它看起来很平坦。右边部分有透视效果,所以看起来是倾斜的。
我知道这已经很旧了,但我想建议使用线性渐变来实现相同的效果,而不是边距偏移。这会将所有内容保留在其原始位置。
HTML
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
CSS
/* 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);
}
您尝试使用
:before
非常接近,您唯一需要更改的是实际上使用倾斜而不是边框:http://jsfiddle.net/Hfkk7/1101/
编辑:你的边框方法也可以工作,你做错的唯一一件事就是将 before 元素放在你的 div 顶部,所以透明边框没有显示。如果您将伪元素放置在 div 的左侧,那么一切都会正常工作:http://jsfiddle.net/Hfkk7/1102/