Добавить границу к пути клипа - PullRequest
Новая
       37

Добавить границу к пути клипа

0 голосов
/ 18 декабря 2018

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

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

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

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

1 Ответ

0 голосов
/ 18 декабря 2018

Вы можете попробовать несколько цветов фона, как показано ниже, и у вас будет лучшая поддержка, чем 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>
...