my text does not show inside absolute positioned div

user_18017544 0
Viewed 96

My text doesn't show inside absolute positioned div. Some of them show but some of them don't. The divs are positioned absolute and the styles are the same but I don't know why it doesn't show.

.shapeContainer {
  position: relative;
}

.shape {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 255px;
  background: rgb(0, 31, 255);
  background: linear-gradient( 135deg, rgba(0, 31, 255, 1) 0%, rgba(0, 44, 119, 1) 27%);
  clip-path: polygon( 0 0, 100% 0, 100% 78.51%, 25.42% 78.51%, 27.25% 53.71%, 22.74% 53.71%, 18.92% 100%, 0 100%);
}

.shape2 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 260px;
  background-color: white;
  clip-path: polygon( 0 0, 100% 0, 100% 79.67%, 24.85% 79.67%, 26.55% 55.28%, 22.88% 55.28%, 19.06% 100%, 0 100%);
}

.shape3 {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 265px;
  margin-bottom: 0;
  background-color: rgba(0, 44, 119, 1);
  clip-path: polygon( 0 0, 100% 0, 100% 80.95%, 24.15% 80.95%, 25.98% 57.14%, 23.02% 57.14%, 19.35% 100%, 0 100%);
}

.shape4 {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 30px;
  margin-top: 75px;
  background-color: #004be2;
}

.shape5 {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 255px;
  background-color: #002157;
  clip-path: polygon(0 0, 25% 0, 18% 92%, 0 92%);
}

.shape6 {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 240px;
  background-color: #0c00e0;
  clip-path: polygon(47% 19%, 100% 19%, 100% 72%, 42% 72%);
}

.shape7 {
  position: absolute;
  z-index: 6;
  width: 100%;
  height: 200px;
  background-color: #00001a;
  opacity: 0.5;
  clip-path: polygon(56% 0, 100% 0, 100% 47%, 52% 47%);
}

.shape8 {
  position: absolute;
  top: 100px;
  left: -45px;
  z-index: 7;
  width: 100%;
  height: 100px;
  background-color: #00001a;
  opacity: 0.5;
  clip-path: polygon(32.19% 61.15%, 38.25% 61.15%, 37.3% 90%, 31.26% 90%);
}

.shape9 {
  position: absolute;
  top: 100px;
  left: 25px;
  z-index: 8;
  width: 100%;
  height: 100px;
  background-color: #00001a;
  opacity: 0.5;
  clip-path: polygon(32.19% 61.15%, 38.25% 61.15%, 37.3% 90%, 31.26% 90%);
}
<header className="header">
  <div className="container">
    <div className="shapeContainer">
      <div className="shape">shape8 1</div>
      <div className="shape2"> shape 2</div>
      <div className="shape3">shape 3</div>
      <div className="shape4">shape 4</div>
      <div className="shape5">shape5 </div>
      <div className="shape6">shape6</div>
      <div className="shape7">shape 7</div>
      <a href="#" className="shape8">
              shape8
            </a>
      <a href="#" className="shape9 ">
              shape9
            </a>
    </div>
  </div>
</header>

css html
2 Answers

You are using 'classname' atribute, change it for just 'class' in your HTML file. It will work!

Right code below

<header class="header">
        <div class="container">
            <div class="shapeContainer">
                <div class="shape">shape8 1</div>
                <div class="shape2">shape 2</div>
                <div class="shape3">shape 3</div>
                <div class="shape4">shape 4</div>
                <div class="shape5">shape5</div>
                <div class="shape6">shape6</div>
                <div class="shape7">shape 7</div>
                <a href="#" class="shape8">
                    shape8
                </a>
                <a href="#" class="shape9">
                    shape9
                </a>
            </div>
        </div>
    </header>
user_158679890

The path cut of everything positioned out of the shape you draw. The text is still in the top left corner of div but cut off.

I guess there are more solutions.

I would use one more tag to wrap the text into. Than I would position it to the place I need via position:absolute;.

There is possibly more proper way to do it - change size of div to the size of shape you want and than draw the path in that container. Move it via position absolute. Text would still be in the top left corner, but easily moved by in wrapper div.

.shapeContainer {
    position: relative;
  }  
  
 .shape5 {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 255px;
    background-color: red;
    clip-path: polygon(0 0, 25% 0, 18% 92%, 0 92%);
  }
 .textInShape{
    position: absolute;
    left: 5%;
    top: 20px;
    color: aliceblue;
} 

.shape7 {
    position: absolute;
    left: 20%;
    z-index: 6;
    width: 50%; 
    height: 100px;
    background-color: blue;
    opacity: 0.5;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 44% 82%); /*changed size of div and path*/
  }
   .textInShape2 {
      position: absolute;
      color: aliceblue;
      width:100%;
      height: 100%;
      text-align: center; 
/*if you dont mind exact position, u can also align the text to middle in this case*/
  }
<header class="header">
      <div class="container">
        <div class="shapeContainer">

          <div href="#" class="shape5">
            <div class="textInShape">shape5</div> 
           </div>
          <div class="shape7">
            <a href="#" class="textInShape2">HALLOOO</a>
          </div>
        </div>
      </div>
    </header>

user_178036260
Related