是否可以像这样用 CSS 剪辑 DIV 的一侧?
Is it possible to clip a side of a DIV with CSS like so?
我有一个 parent 和一个 child div
,其 ID 和尺寸如下图所示:
<div id="clip">
<div id="page">
<!-- Content/Images here -->
</div>
</div>
parent 和 child div 的尺寸如下:
#clip {
height: 1000px;
width: 1414px;
}
#page {
height: 1000px;
width: 707px;
}
现在我想在 angle ø
处从 child div
倾斜一边,然后剪掉 div
的右侧,如下所示:
单独使用 CSS 可以吗?
Constraints: Cannot use the triangular border hack, the content inside the #page child div
cannot be skewed, and the less hack-ey the solution, the better it is for everything. I was hoping this could be done with just CSS3 transformations but I couldn't find a way so far.
@ksav 的回答很接近,但它仍在使用具有绝对位置的伪 :before 元素的遮蔽技术。它不会让我 消失 div#page 的剪辑部分,这样它看起来像这样:
div{
width:50%;
height:100%;
position: absolute;
border: 1px solid black;
}
#parent{
background: #fff333;
}
#child{
background: #aaaccc;
left: 30%;
transform: skewX(-8deg);
}
<div id="parent">
</div>
<div id="child">
</div>
是的,这是可能的,这是一个粗略的想法。我确信这不是最好的解决方案,但它确实有效。
你可以使用-webkit-clip-path
#clip {
height: 1000px;
width: 1414px;
background-color: yellow;
}
#page {
height: 1000px;
width: 707px;
background-color: blue;
color: white;
-webkit-clip-path: polygon(0 0, 40% 0, 29% 100%, 0% 100%);
}
这是一个例子:https://codepen.io/rollinglex/pen/ZMNvjY
我发现这个网站非常有用:https://bennettfeely.com/clippy/
关于使用js和css,这篇文章应该能帮到你:https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/
.content {
background: grey;
position: relative;
height: 1000px;
width: 707px;
}
.content:before {
background: rgba(255, 255, 255, 0.8);
position: absolute;
height: 100%;
width: 110%;
transform: skewX(-5deg) translateX(10%);
transform-origin: bottom left;
content:'';
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet congue aliquam. Etiam efficitur lectus id nulla iaculis dapibus. Phasellus nec nisl bibendum, hendrerit diam at, consequat est. In posuere lorem eget felis venenatis elementum.
Ut vestibulum a nulla commodo pharetra. Cras accumsan dui a libero faucibus rutrum. Integer sed nunc accumsan, convallis lectus venenatis, iaculis arcu. Pellentesque tincidunt purus eu pulvinar tempus. Nam aliquet orci vel sapien condimentum pharetra.
In rhoncus vehicula metus, vitae euismod mauris consequat sit amet. Praesent suscipit quam libero, eget semper neque aliquet faucibus.</p>
</div>
我有一个 parent 和一个 child div
,其 ID 和尺寸如下图所示:
<div id="clip">
<div id="page">
<!-- Content/Images here -->
</div>
</div>
parent 和 child div 的尺寸如下:
#clip {
height: 1000px;
width: 1414px;
}
#page {
height: 1000px;
width: 707px;
}
现在我想在 angle ø
处从 child div
倾斜一边,然后剪掉 div
的右侧,如下所示:
单独使用 CSS 可以吗?
Constraints: Cannot use the triangular border hack, the content inside the #page child
div
cannot be skewed, and the less hack-ey the solution, the better it is for everything. I was hoping this could be done with just CSS3 transformations but I couldn't find a way so far.
@ksav 的回答很接近,但它仍在使用具有绝对位置的伪 :before 元素的遮蔽技术。它不会让我 消失 div#page 的剪辑部分,这样它看起来像这样:
div{
width:50%;
height:100%;
position: absolute;
border: 1px solid black;
}
#parent{
background: #fff333;
}
#child{
background: #aaaccc;
left: 30%;
transform: skewX(-8deg);
}
<div id="parent">
</div>
<div id="child">
</div>
是的,这是可能的,这是一个粗略的想法。我确信这不是最好的解决方案,但它确实有效。
你可以使用-webkit-clip-path
#clip {
height: 1000px;
width: 1414px;
background-color: yellow;
}
#page {
height: 1000px;
width: 707px;
background-color: blue;
color: white;
-webkit-clip-path: polygon(0 0, 40% 0, 29% 100%, 0% 100%);
}
这是一个例子:https://codepen.io/rollinglex/pen/ZMNvjY
我发现这个网站非常有用:https://bennettfeely.com/clippy/
关于使用js和css,这篇文章应该能帮到你:https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/
.content {
background: grey;
position: relative;
height: 1000px;
width: 707px;
}
.content:before {
background: rgba(255, 255, 255, 0.8);
position: absolute;
height: 100%;
width: 110%;
transform: skewX(-5deg) translateX(10%);
transform-origin: bottom left;
content:'';
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet congue aliquam. Etiam efficitur lectus id nulla iaculis dapibus. Phasellus nec nisl bibendum, hendrerit diam at, consequat est. In posuere lorem eget felis venenatis elementum.
Ut vestibulum a nulla commodo pharetra. Cras accumsan dui a libero faucibus rutrum. Integer sed nunc accumsan, convallis lectus venenatis, iaculis arcu. Pellentesque tincidunt purus eu pulvinar tempus. Nam aliquet orci vel sapien condimentum pharetra.
In rhoncus vehicula metus, vitae euismod mauris consequat sit amet. Praesent suscipit quam libero, eget semper neque aliquet faucibus.</p>
</div>