是否可以创建“CSS3变形倾斜一面”
我找到一个@R_301_463@案,但对我来说没有用,因为我需要使用图像进行背景(不是颜色)
- #skewOneSide {
- border-bottom: 40px solid #FF0000;
- border-left: 50px solid rgba(0,0);
- height: 0;
- line-height: 40px;
- width: 100px;
- }
即使这个JsFiddle也没有用(偏斜的区域应该是透明的)
解决方法
尝试这个：
要取消选择图像,请使用图像的嵌套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>
例子：
