代码之家 › 专栏 › 技术社区 › Marvin Danig

有没有可能像这样用CSS来剪辑DIV的一个侧面[[副本]

css-transforms css3 css html javascript

2

Marvin Danig · 技术社区 · 7 年前

我有父母和孩子 div

<div id="clip"> 
  <div id="page"> 
     <!-- Content/Images here -->
  </div>
</div>

父和子div的维度如下所示:

#clip {
  height: 1000px;
  width: 1414px;
}

#page {
  height: 1000px;
  width: 707px; 
}

现在我想从孩子身上歪出一面 部门 在 angle Ã¸ 部门 ,就像这样:

约束条件:不能使用三角形边框,内容在#页子级内 部门 不能歪斜,解决方案越少,对一切都越好。我希望这可以通过CSS3转换来实现,但是到目前为止我还没有找到一种方法。

@ksav的答案很接近,但它仍在使用伪:before元素和绝对位置的遮蔽技术。它不让我消失

3 回复 | 直到 6 年前

1

2

Meeses 7 年前

您可以使用-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/

https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

2

0

Mean Coder 7 年前

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>

是的,这是可能的,这里有一个粗略的想法如何做到这一点。我相信这不是最好的解决办法,但它是有效的。

3

0

ksav 7 年前

.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>

Codepen