Кривая граница элемента

#html #css #css3

Подскажите, пожалуйста, как сверстать границу как на этом скриншоте?
Граница, которая после изображения.


    

Ответы

Ответ 1

Вариант на основе статьи "Геометрические фигуры на CSS". С помощью псевдоэлементов
:before и :after делаем два треугольника, которыми закрываем нижние углы фотографии. 

Псевдоэлементы добавляются до и после содержимого контейнера, поэтому контейнер является
родительским блоком по отношению к своим псевдоэлементам. Позиционируем  контейнер
относительно, а его псевдоэлементы - абсолютно, чтобы вести отсчёт координат от краёв
контейнера.

bottom: 0; прижимает нижние края треугольников к нижнему краю контейнера. Аналогично
left: 0; и right: 0; задают положение для левого и правого края.

1vw равен 1 проценту от ширины области просмотра.

И назначаем картинке свойство display: block;, чтобы между нею и контейнером не возникало
лишних просветов.



.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;
}

  



Ответ 2

Вот такой вариант есть, через 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%);
}

  



Ответ 3

Привет. Я более чем уверен, что такие вещи реализуют либо через canvas, либо через
графический редактор. Думаю, что второй путь будет более безопасным и менее трудоемким.
Я тебе нарисовал эти границы. Один в формате png, другой в .cdr (Файл CorelDraw). Достаточно
будет переместить на верхний слой и все будет точно также, как на картинке которую
ты прислал.

Вектор

Растр


Ответ 4

Интереснее всего через clip-path, но на это ответил уважаемый @MasterAlex.
Можно извратится и сделать через canvas (скорее просто так, в работе используйте
clip-path):



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;
}

  
  
Hello, world!



Ответ 5

Ну или такой костыль



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;
}