有没有可能在CSS中创build一个angular度的angular落？
我想知道是否有任何方式来创build这个纯CSS的形状。 为了进一步扩展这个问题，这个形状需要在内部剪切图像（把它想象成一个蒙版 – 但是灰色边框必须是可见的）。
或者我最好在canvas / svg中创build它？
保持边界有点困难，但是我设法使用：before和之后的元素：在具有父容器的元素之前（：之前和之后：不在img标签上工作）
-
向容器添加一个边框
-
添加一个之前，以阻止一个angular落，并偏移-1以覆盖边界
-
在之后添加一个稍微偏移之前在中断内创build行
正如你所看到的，45度线的厚度有点问题：
.cutCorner { position:relative; background-color:blue; border:1px solid silver; display: inline-block; } .cutCorner img { display:block; } .cutCorner:before { position:absolute; left:-1px; top:-1px; content:''; border-top: 70px solid silver; border-right: 70px solid transparent; } .cutCorner:after { position:absolute; left:-2px; top:-2px; content:''; border-top: 70px solid white; border-right: 70px solid transparent; } <div class="cutCorner"> <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" /> </div>
看演示
你可以通过使用伪代码， border-width和border-color看下面的代码来看看它是如何完成的。
HTML
<div class="cut"></div>
CSS
.cut { position:relative; width:500px; height: 200px; padding:20px; color:#000; background:#ccc; } .cut:before { content:""; position:absolute; top:0; left:0; border-width:30px 30px 0px 0px; border-style:solid; border-color:#fff transparent transparent #fff ; }
另一个解决scheme使用这个jQuery脚本跨浏览器支持。 – > http://jquery.malsup.com/corner/
在这里看到的演示
HTML
<div class="cut"></div>
CSS
.cut { position:relative; width:500px; height: 200px; padding:20px; color:#000; background:#ccc; }
JS
$(".cut").corner("bevel tl 50px");
使用CSS：
确切的形状可以使用CSS来实现。 这个想法是在左上angular有一个带有border-radius的元素，沿Y轴倾斜，然后将其放在矩形的前面。 做这些将使它看起来好像矩形元素在顶部有一个弯曲的边缘的三angular形切口。
如果形状的内部部分只有一个颜色（实心或透明），那么只能使用一个元素来实现。 但是，如果图像需要添加到形状内部（如提到的问题），那么我们需要多个元素，因为我们必须扭转图像上的skew效果，而且这不能没有子元素。
.shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; }
<script src="ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="shape"></div> <div class="shape semi-transparent"></div> <div class="shape-image"> <div class="before"> <div class="img"></div> </div> </div>
这是可能的，但它是一个CSS3解决scheme，所以不会在旧的浏览器上工作，我不认为。
我所做的是，我创build了两个div，一个边框四周，另一个边框只在底部。 使用translate我已经旋转该div的45度掩盖另一个div的angular落，给予所需的效果。
HTML
<div class="holder"> <div class="main"></div> <div class="corner"></div> </div>
CSS
.holder { position:relative; width: 180px; margin:30px } .main { width: 160px; height: 40px; border: 1px solid grey; position:absolute; left:0; z-index: 1; } .corner { border-bottom: 1px solid grey; width:30px; height: 41px; position:absolute; top:-25px; right:0; z-index:2; background:#fff; /* Safari */ -webkit-transform: rotate(45deg); /* Firefox */ -moz-transform: rotate(45deg); /* IE */ -ms-transform: rotate(45deg); /* Opera */ -o-transform: rotate(45deg); }
产量
看小提琴
