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

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

css-transforms css3 css html javascript

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 年前

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/

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>

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前