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/.

1
  • clip-path-ом не будет работать в EDGE && IE... Псевдо-элементом лучше, ну или svg
    – Air
    16 мар 2018 в 13:48

1 ответ 1

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>

6
  • Не плохо, для данного случая. Но вопрос был об SVG, когда дугой с одной стороны не обойтись. Например, есть задача, обрезать изображение по форме прямоугольной, но немного выпуклой, так же как здесь, но со всех сторон. Как решить такой вопрос?
    – Amsterdam
    14 янв 2019 в 10:31
  • @Amsterdam, а где в вопросе что-то сказанное про svg?
    – Air
    14 янв 2019 в 10:33
  • @Amsterdam, если есть вопрос, то задай его и уверен тебе помогут. Я не совсем понял на счет обрезать и немного выпуклой...
    – Air
    14 янв 2019 в 10:41
  • просто clipPath зачастую пересекается с SVG, поэтому и решение с ним может быть связано. Но дело в том, что clippath умеет рисовать либо ломаные, либо овалы и окружности, а вот с более сложными обтекаемыми фигурами уже не получается так просто
    – Amsterdam
    14 янв 2019 в 13:03
  • Не могу уловить ход мыслей....
    – Air
    14 янв 2019 в 15:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.