如何从右上角裁剪 div。 假设我有一个方形图像,我将右上角切成圆形。我的问题是如何使用纯 css 制作方形图像的剩余形状??? 请帮助我!!
我的代码:
div {
height: 300px;
background: red;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid red;
width: 0;
}
这段代码像折叠页面一样折叠右上角。但我需要在右上角切圆。
最佳答案
与@web-tiki 的答案非常相似,但是使用了 box-shadow 来绘制背景,因此可以看到主体背景。 <强> DEMO
div {
height: 150px;
width:150px;
overflow:hidden;
position: relative;
}div:before {
content: '';
position: absolute;
top: -40px; right: -40px;
height: 80px ;
width: 80px;
border-radius:100%;
box-shadow:red 0 0 0 500px;
}
关于html - 从右上角制作一个类似圆形裁剪的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25887078/