如何在CSS中使用底部有角度的切口和图像背景来完成此形状？

Question

I have read up on various methods and played with the Clippy tool , the problem is the browser support just isn't there yet. What would be the best method for accomplishing the look of the image below with CSS? I am trying to add a shape as bottom-border as you can see in the image below right after the blue background image. Is there a way I can do this that most recent major browsers support through CSS?

What I've tried (doesn't seem to work in Chrome and others):

.element {
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
}

The desired result would look something like:

Answer 1

Both dippas' answer and the demo in misterManSam's comment are good but they would work only if the page background is a solid color (which can then be used as border's color or within the gradient). They would run into problems when the page's background is either an image (or) a gradient and they should show through the cutout portion of the shape.

For such cases I would recommend using SVG instead of CSS because it is so complex to create it with CSS that it is not actually worth the effort. Though you've asked for CSS, I will detail these SVG methods here just in case you want to use them (or atleast some future readers might find it helpful).

With SVG:

With SVG we can either create a path and fill it with the image (or) use a SVG mask for creating the shape. ( Note: CSS clip-path using SVG is still a no-go due to lack of support in IE. )

Below snippet uses SVG path element to create the shape and then fill it with the image.

 svg { height: 200px; width: 100%; } path { fill: url(#image); } /* Just for demo */ path:hover{ cursor: pointer; } body { min-height: 100vh; background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <svg viewBox='0 0 1024 200' preserveAspectRatio='none'> <defs> <pattern id='image' height='200' width='1024' patternUnits='userSpaceOnUse'> <image xlink:href='http://lorempixel.com/1024/200/nature/3' height='200' width='1024' /> </pattern> </defs> <path d='M0,0 1024,0 1024,150 716.8,200 0,150z' /> </svg> 

The following snippet uses SVG mask. The difference between using a path with an image fill and a mask is the hover area. With a path the hover effects are restricted to the shape boundary whereas with a mask, the image is still a rectangle (or square) and so hover effects are triggered even outside.

 svg { height: 200px; width: 100%; } image { mask: url(#masker); } /* Just for demo */ image:hover{ cursor: pointer; } body { min-height: 100vh; background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <svg viewBox='0 0 1024 200' preserveAspectRatio='none'> <defs> <mask id='masker' x='0' y='0' width='1024' height='200'> <polygon points='0,0 1024,0 1024,200 0,200z' fill="#fff" /> <path d='M0,150 716.8,200 1024,150 1024,200 0,200z' fill="#000" /> </mask> </defs> <image xlink:href='http://lorempixel.com/1024/200/nature/3' height='200' width='1024' /> </svg> 

---

With CSS:

The below option is our best bet with pure CSS but unfortunately it has poor browser support. It uses CSS linear-gradient as mask images to hide the portions that are not required. This method works only in Webkit powered browsers for now and so is a no-go .

 .shape { height: 200px; width: 100%; background-image: url(http://lorempixel.com/1200/200/nature/3); -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white); mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white); -webkit-mask-size: 70.5% 30%, 30% 30%, 100% 70%; -webkit-mask-position: bottom left, bottom right, top left; -webkit-mask-repeat: no-repeat; } body { min-height: 100vh; background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <div class='shape'></div> 

Other attempts to produce a transparent cut run into problems if the shape has to be responsive. For example, the below snippet uses very complex transformations, positioning etc to achieve this shape but it is not responsive (view in full page mode). I wouldn't have recommended this method even if the shape was responsive (due to complexities involved) but the lack of responsiveness means this is a no-go .

 .shape { position: relative; height: 200px; width: 100%; overflow: hidden; } .shape-left, .shape-right, .shape img { position: absolute; height: 100%; } .shape-left { width: 75%; transform: skewY(5deg); overflow: hidden; } .shape-left img { top: -7%; bottom: 0px; width: 133.3%; transform: skewY(-5deg); } .shape-left, .shape-left img { transform-origin: bottom right; backface-visibility: hidden; } .shape-right { right: 0%; width: 25%; transform: skewY(-10deg); overflow: hidden; } .shape-right img { top: -13.5%; left: -300%; width: 400%; transform: skewY(10deg); } .shape-right { transform-origin: bottom left; backface-visibility: hidden; } /* just for demo */ .reference { height: 200px; width: 100%; } .reference img { height: 100%; width: 100%; } * { box-sizing: border-box; } body { min-height: 100vh; background-image:radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <div class='shape'> <div class='shape-left'> <img src='http://lorempixel.com/800/200/nature/3' /> </div> <div class='shape-right'> <img src='http://lorempixel.com/800/200/nature/3' /> </div> </div> <hr> <div class='reference'> <img src='http://lorempixel.com/800/200/nature/3' /> </div> 

^{Note: This may have been the item that misterManSam was referring to in comments but I feel the needs are a bit different here even though both involve creating unusual borders.}

Answer 2

you can use a background-image on a div and two shapes using it pseudo-selectors :before/:after

Something like this:

 .bg { background: url(http://lorempixel.com/1600/900) no-repeat center top; min-height: 100px; min-width: 200px; position: relative } .bg:before { content: ""; border-bottom: 65px solid white; border-right: 575px solid rgba(0, 0, 0, 0); position: absolute; left: 0; bottom: 0; } .bg:after { content: ""; border-bottom: 65px solid white; border-left: 200px solid rgba(0, 0, 0, 0); position: absolute; right: 0; bottom: 0; } 

 <div class="bg"></div> 

Answer 3

I think the easiest way to do it is with pseudo elements on the parent div element. This is basic CSS knowledge and can be implemented very easily. The parent div needs to have the position: relative; property set and the rest is done by the ::before and ::after elements.

.background::before {
      transform: rotate(10deg);
      position: absolute;
}

Example

Hope this helps.