Search code examples
htmlcssclip-path

text over a clip path

This is my cover page

What I need is that the white letters flow over the clip path I have tried z-index, but that doesn't work

Here is my code:

.header {
    height: 85vh;
    background-image: linear-gradient(
        to right bottom,
        rgba(255,255,255, 0.8),
        rgba(0,0,0, 0.8)),
    url(../../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;

    clip-path: polygon(100% 100%, 100% 0, 65% 100%, 63% 100%, 100% 0, 99% 0, 100% 0, 13% 100%, 11% 100%, 100% 0, 0 81%, 0 77%, 100% 0, 0 45%, 0 43%, 100% 0, 0 0, 0 0, 0 100%);
<header class="header">
    <div class="header__logo-box">
        <img src="img/logo-white.png" alt="Logo" class="header__logo">
    </div>

    <div class="header__text-box">
        <h1 class="heading-primary">
            <span class="heading-primary--main">My Blog</span>
            <span class="heading-primary--sub">Enrique Cena</span>
        </h1>

        <a href="#section-tours" class="btn btn--white btn--animated">About me</a>
    </div>

Solution

  • maybe you can do something with below:

    .header {
   position: relative;
   height: 85vh;
   width: 100%;
}

.header::before {
   z-index: -1;
   content: '';
   top: 0;
   left: 0;
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: cyan;
   background-size: cover;
   background-position: top;
   clip-path: polygon(100% 100%, 100% 0, 65% 100%, 63% 100%, 100% 0, 99% 0, 100% 0, 13% 100%, 11% 100%, 100% 0, 0 81%, 0 77%, 100% 0, 0 45%, 0 43%, 100% 0, 0 0, 0 0, 0 100%);
 }

    Please change the background-color to your background-image