Triangle aligned with text which shows part of the video above

user_3711219 0
Viewed 43

I'm trying to achieve the triangle aligned with the text like here: enter image description here

At the moment I have it unaligned enter image description here The issue is that the position of the text is responsive, in the middle of the page, in a div max-width: 1100px;

As you can see the triangle is part of a curved shape which shows more of the video towards the right side. Structure I have

<div class="top">
<video/>
</div>
<div class="bottom">
<div class="shape_with_triangle"></div>
</div>

.shape_with_triangle {
background-image: url("");
margin-top:-40px;
}

I'm unsure how can I align that triangle. I can put it in another shape, seperated from the curved one, but not sure how it will help.

playground: https://jsfiddle.net/rz1w2Lcb/

css html
1 Answers

* {
    margin: 0;
    padding: 0
  }
  
  .video {
    width: 100%;
    height: 400px;
    background-color: black;
    z-index: 0;
  }
  
  .bottom {
    position: relative;
    margin-top: -45px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    z-index: 10;
  }
  .triangle{
    display: flex;
  }
  
  .side {
    width: 0;
    height: 0;
    padding-left: 55px; //ajust where you want the triangle here
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 40px solid #f00;
}
.side-reverse {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 40px solid #f00;
}
.rest{
    background-color: #f00;
    height: auto;
    width: 100%;
}
  
  p {
    padding: 0px 80px 0px 80px;
    background-color: #f00;
  }
  iframe{
    z-index: 0;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css"/>
    <title>Document</title>
</head>
<body>
    <div class="top">
        <iframe class="video" src="https://www.youtube.com/embed/VtRLrQ3Ev-U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="bottom">
        <div class="triangle">
            <div class="side"></div>
            <div class="side-reverse"></div>
            <div class="rest"></div>
        </div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
</body>
</html>

user_149373320
Related