使用CSS切角 [英] Cut Corners using CSS
本文介绍了使用CSS切角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望剪切div的左上角,就好像您已经折叠了页面的一角。
I'm looking to "cut" the top left corner of a div, like if you had folded the corner of a page down.
我想
推荐答案
如果父元素有纯色背景,你可以使用伪元素创建效果:
If the parent element has a solid color background, you can use pseudo-elements to create the effect:
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;
}
PS a href =http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/>即将到来的 border-角形
正是你要找的。太糟糕了,它可能会切断规范,永远不会在任何浏览器的野生:(
P.S. The upcoming border-corner-shape
is exactly what you're looking for. Too bad it might get cut out of the spec, and never make it into any browsers in the wild :(
这篇关于使用CSS切角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文