Tell me, please, how to impose a border like in this screenshot?
The border that is after the image.

enter image description here

    5 answers 5

    Option based on the article " Geometric Shapes on CSS ." Using the pseudo-elements :before and :after we make two triangles with which we close the bottom corners of the photo.

    Pseudo-elements are added before and after the contents of the container, so the container is the parent unit of its pseudo-elements. We position the container relatively, and its pseudo-elements absolutely, in order to count the coordinates from the edges of the container .

    bottom: 0; presses the bottom edges of the triangles to the bottom edge of the container. Same as left: 0; and right: 0; set the position for the left and right edges.

    1vw is 1 percent of the width of the viewport.

    And assign the picture property display: block; , so that between it and the container does not arise excess gaps.

     .container { position: relative; width: 100%; } img { display: block; width: 100%; } .container:after, .container:before { border-bottom: 3vw solid white; bottom: 0; content: ""; position: absolute; } .container:before { border-right: 50vw solid transparent; left: 0; } .container:after { border-left: 50vw solid transparent; right: 0; } 
     <div class="container"> <img src="http://i.stack.imgur.com/Ghlee.jpg" alt=""> </div>

      Here is an option through the clip-path :

       .container { position: absolute; top: 0; left: 0; width: 100%; } img { width: 100%; height: auto; clip-path: polygon(0 45%, 0 0, 100% 0, 100% 45%, 50% 65%); -webkit-clip-path: polygon(0 45%, 0 0, 100% 0, 100% 45%, 50% 65%); } 
       <div class="container"> <img src="http://i.stack.imgur.com/SUsNL.png" alt="" /> </div>

      • Kaef, I think this is what you need - Mr. Black
      • Wow, for the first time I heard this style of clip-path. This is a really cool thing - you can cut anything and anything! And no crutches with border and border-radius. And it is supported, it seems, as excellent css-tricks.com/almanac/properties/c/clip . What's the catch? - Goncharov Alexander

      Hey. I am more than confident that such things are realized either through the canvas or through a graphic editor. I think that the second way will be safer and less time consuming. I drew you these boundaries. One in png format, the other in .cdr (CorelDraw file). It will be enough to move it to the top layer and everything will be exactly the same as in the picture you sent.

      Vector

      Raster

      • It is unlikely through the canvas, most likely a picture. You can SVG base64 background in css, for me it is the best option, although svg is not stretched to the full width - Mr. Black
      • Yes, I fully agree with you. Take note - Jeck Jeck

      The most interesting thing is through the clip-path , but it was answered by the respected @MasterAlex.
      You can pervert and make it through canvas (rather, just use the clip-path in the work):

       function draw() { let canvas = document.querySelector('header canvas'), ctx = canvas.getContext('2d'), width = canvas.width, height = canvas.height, bg = new Image(); bg.src = 'http://worldinsidepictures.com/wp-content/uploads/2013/06/p-1.jpg'; bg.onload = () => { // Сразу ставим загруженную картинку в canvas ctx.drawImage(bg, 0, 0); // Рисуем вогнутый пятиугольник ctx.fillStyle = "#ccc"; ctx.beginPath(); ctx.moveTo(0, height * .85); ctx.lineTo(width / 2, height * 0.95); ctx.lineTo(width, height * .85); ctx.lineTo(width, height); ctx.lineTo(0, height); ctx.fill(); } // Просто так, чтобы удостоверится что работает меню document.querySelector('#menu').addEventListener('click', e => alert('Menu!')); } document.addEventListener('DOMContentLoaded', draw); 
       header { width: 634px; } header canvas { display: block; } #menu { background: #ccc; text-align: center; cursor: pointer; } 
       <header> <canvas width='634' height='369'></canvas> <div id='menu'>Hello, world!</div> </header>

        Well, or such a crutch

         div { position: relative; width: 512px; height: 154px; overflow: hidden; } div:before { content: ''; position: absolute; bottom: 25%; width: 200%; left: -50%; height: 150%; border-radius: 100%; box-shadow: 0px 80px 0 0 #CDCDCD; } 
         <div><img src='http://static.tumblr.com/f245a30826dacb1b692c774279da16ef/9qglsht/fvommjlre/tumblr_static_header-background.jpg' width='512'></div>