Четырехугольная трапеция в CSS

Question

Привет < Я пытаюсь воссоздать это изображение в CSS.

До сих пор у меня есть это:

https://jsfiddle.net/mstppvwe/

HTML:

<div id="container"> 
     <a class="page-scroll" href="#red "> 
      <div class="red"> 
       <p>=FIRST-</p> 
      </div> 
     </a> 
     <a class="page-scroll" href="#orange"> 
      <div class="orange"> 
       <p>--SECOND--</p> 
      </div> 
     </a> 
     <a class="page-scroll" href="#blue"> 
      <div class="blue"> 
       <p>--- THIRDBOX ---</p> 
      </div>    
     </a> 

CSS:

<div id="container"> 
     <a class="page-scroll" href="#red "> 
      <div class="red"> 
       <p>=FIRST-</p> 
      </div> 
     </a> 
     <a class="page-scroll" href="#orange"> 
      <div class="orange"> 
       <p>--SECOND--</p> 
      </div> 
     </a> 
     <a class="page-scroll" href="#blue"> 
      <div class="blue"> 
       <p>--- THIRDBOX ---</p> 
      </div>    
     </a> 

Я играл с границами, а также попытался преобразования, но безрезультатно!

Весь бар должен быть гиперссылку с наложением текста, как показано в моем HTML макете

Может кто-то пожалуйста, помогите. Благодаря!

Answer 1

Вы можете сделать это с помощью :before псевдоэлемента на каждом div.

#container { 
 
    margin-left: 100px; 
 
    width: 200px; 
 
    right: 20px; 
 
} 
 
.three-bars, 
 
.red, 
 
.orange, 
 
.blue { 
 
    color: white; 
 
    height: 50px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    float: right; 
 
    font-size: 20px; 
 
    text-align: right; 
 
    position: relative; 
 
} 
 
.red { 
 
    width: 100px; 
 
    background-color: #da3421; 
 
} 
 
.orange { 
 
    width: 150px; 
 
    background-color: #ec9a4c; 
 
} 
 
.blue { 
 
    width: 200px; 
 
    background-color: #5ab7c4; 
 
} 
 
a > div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 0 70px 70px; 
 
    border-color: transparent transparent black; 
 
    transform: translateX(-100%); 
 
} 
 
.red:before { 
 
    border-color: transparent transparent #da3421; 
 
} 
 
.orange:before { 
 
    border-color: transparent transparent #ec9a4c; 
 
} 
 
.blue:before { 
 
    border-color: transparent transparent #5ab7c4; 
 
}

<div id="container"> 
 
    <a class="page-scroll" href="#red "> 
 
    <div class="red"> 
 
     <p>=FIRST-</p> 
 
    </div> 
 
    </a> 
 
    <a class="page-scroll" href="#orange"> 
 
    <div class="orange"> 
 
     <p>--SECOND--</p> 
 
    </div> 
 
    </a> 
 
    <a class="page-scroll" href="#blue"> 
 
    <div class="blue"> 
 
     <p>--- THIRDBOX ---</p> 
 
    </div> 
 
    </a> 
 
</div>