Добавить границу к траектории обрезки

Я пытался добавить границу на одном краю многоугольника траектории обрезки. Думаю, мне нужно найти обходной путь, но я не могу понять, как это сделать. Может ли кто-нибудь сделать мне какое-нибудь предложение, пожалуйста?

Вот как далеко я зашел:

.container {
  background-color: rgb(225, 204, 162);
  flex-direction: column;
  display: flex;
  font-weight: bold;
  color: white;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.img {
  clip-path: polygon(0px 0px, 97.91% 0.1vw, 102.09% 82.04%, -61px 469px);
}

h2.caption {
  font-size: 40px;
  font-family: 'Crete Round', serif;
  text-align: center;
  font-weight: bold;
  clip-path: polygon(3px 44px, 99.99% -3.60vw, 100% 100%, 0px 127px);
  margin: 0;
}

<div class = "container">
  <img class = "img" src = "https://i.imgur.com/74Cam16.png" alt = "img" />
  <h2 class = "caption">
    Eigene Entwicklung einzigartiges Profil.
  </h2>
</div>

И как это должно выглядеть (я хочу нарисовать эту наклонную белую линию):

Добавить границу к траектории обрезки

Весь точка траектории клипа - это клипы всего, что не находится внутри траектории. Возможно, вам придется переосмыслить.

— 18.12.2018 17:19

css clip-path

18.12.2018 16:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Вы можете попробовать несколько вариантов окраски фона, как показано ниже, и у вас будет лучшая поддержка, чем у clip-path:

.container {
  background:
   linear-gradient(165deg,transparent 60%,#fff 60%,#fff calc(60% + 3px), rgb(225, 204, 162) calc(60% + 4px)),
   url(https://i.imgur.com/74Cam16.png),
   linear-gradient(165deg,transparent 25%, rgb(225, 204, 162) 25.5%);
  background-repeat:no-repeat;
  padding-top:300px;
  width:400px;
  font-weight: bold;
  color: white;
}

h2.caption {
  font-size: 40px;
  font-family: 'Crete Round', serif;
  text-align: center;
  font-weight: bold;
  margin: 0;
}

<div class = "container">
  <h2 class = "caption">
    Eigene Entwicklung einzigartiges Profil.
  </h2>
</div>

18.12.2018 17:21

Другие вопросы по теме

Преобразование CSS clip-path со смешанными (фиксированными и процентными) значениями в SVG clip-path

CSS - как размыть маску SVG?

Как сделать так, чтобы путь клипа CSS находился только поверх div?

Как сделать круговую маску обрезки, которая следует за курсором мыши?

Проблемы с применением SVG clip-path в Safari

Создание адаптивного пути клипа SVG / Создание адаптивного пути SVG <path>

Обрезка SVG: Firefox игнорирует преобразование формы обрезки

Изменение CSS для div при щелчке внутри цикла for JavaScript

Наклон продолжает течь при изменении размера браузера (используется clip-path)

Clip-path горизонтальная белая линия в Chrome

Добавить границу к траектории обрезки

Ответы 1

Другие вопросы по теме

Похожие вопросы