有没有可能在CSS中创build一个angular度的angular落?

我想知道是否有任何方式来创build这个纯CSS的形状。 为了进一步扩展这个问题,这个形状需要在内部剪切图像(把它想象成一个蒙版 – 但是灰色边框必须是可见的)。

在这里输入图像描述

或者我最好在canvas / svg中创build它?

保持边界有点困难,但是我设法使用:before和之后的元素:在具有父容器的元素之前(:之前和之后:不在img标签上工作)

  1. 向容器添加一个边框

  2. 添加一个之前,以阻止一个angular落,并偏移-1以覆盖边界

  3. 在之后添加一个稍微偏移之前在中断内创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-widthborder-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="https://cdnjs.cloudflare.com/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); } 

产量

被削减的角落

看小提琴