如何使用CSS裁剪角？
如何使用CSS裁剪角？
提问于 2018-07-23 04:27:02
我想“剪”一个div的左上角，就像把一页的角折下来一样。
想用纯CSS来做，有什么方法吗？
回答 2
Stack Overflow用户
发布于 2018-07-23 13:01:26
css剪辑路径
使用clip-path是一种新的替代方案。它开始得到更多的支持，现在已经有了很好的文档。它是使用SVG来创建形状，所以可以直接响应。
div {
width: 200px;
min-height: 200px;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
background: lightblue;
}<div>
<p>Some Text</p>
</div>
CSS变换
我个替代web-tiki转换的答案。
body {
background: lightgreen;
}
div {
width: 200px;
height: 200px;
background: transparent;
position: relative;
overflow: hidden;
}
div.bg {
width: 200%;
height: 200%;
background: lightblue;
position: absolute;
top: 0;
left: -75%;
transform-origin: 50% 50%;
transform: rotate(45deg);
z-index: -1;
}<div>
<div class="bg"></div>
<p>Some Text</p>
</div>
Stack Overflow用户
发布于 2018-07-23 13:57:33
你可以用linear-gradient。比如说父div有一个背景图像，你需要一个div，在它上面有一个灰色背景和一个左折角。
你可以这样做：
.parent-div { background: url('/image.jpg'); }
.child-div {
background: #333;
background: linear-gradient(135deg, transparent 30px, #333 0);
}代码链接：https://codepen.io/narthur/pen/BrbaYj
更多可读：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005624
复制相关文章
相似问题
腾讯云开发者
