4

введите сюда описание изображения

Сейчас у меня стоит clip-path: polygon(50% 0%, 100% 0, 100% 100%, 70% 90%, 44% 87%, 23% 91%, 0 99%, 0 0); Есть ли программы или сервисы в которых можно нарисовать такое ? Нашел два сервиса , но оба неподходят под такую задачу. Первый http://www.cssplant.com/clip-path-generator . Второй https://bennettfeely.com/clippy/.

Серега Он
  • 89
  • clip-path-ом не будет работать в EDGE && IE... Псевдо-элементом лучше, ну или svg – Air Mar 16 '18 at 13:48

1 Answers1

4

.block {
  position: relative;
  width: 300px;
  height: 200px;
  background: red;
}

.block::after {
  display: block;
  width: 100%;
  height: 80px;
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  background: white;
  border-radius: 50%;
}
<div class="block"></div>
Air
  • 14,505
  • Не плохо, для данного случая. Но вопрос был об SVG, когда дугой с одной стороны не обойтись. Например, есть задача, обрезать изображение по форме прямоугольной, но немного выпуклой, так же как здесь, но со всех сторон. Как решить такой вопрос? – Amsterdam Jan 14 '19 at 10:31
  • @Amsterdam, а где в вопросе что-то сказанное про svg? – Air Jan 14 '19 at 10:33
  • @Amsterdam, если есть вопрос, то задай его и уверен тебе помогут. Я не совсем понял на счет обрезать и немного выпуклой... – Air Jan 14 '19 at 10:41
  • просто clipPath зачастую пересекается с SVG, поэтому и решение с ним может быть связано. Но дело в том, что clippath умеет рисовать либо ломаные, либо овалы и окружности, а вот с более сложными обтекаемыми фигурами уже не получается так просто – Amsterdam Jan 14 '19 at 13:03
  • Не могу уловить ход мыслей.... – Air Jan 14 '19 at 15:44
  • Создал отдельный вопрос, если интересно: https://ru.stackoverflow.com/questions/932105/Нестандартное-изображение-clippath Уже несколько часов пытаюсь реализовать, но не могу понять как – Amsterdam Jan 14 '19 at 16:47