Trapèze quadrilatère en CSS

Question

Hey < J'essaie de recréer cette image en CSS.

Jusqu'à présent, j'ai ceci:

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> 

J'ai joué avec les frontières et aussi essayé le transformer, en vain!

La barre entière doit être un lien hypertexte avec une superposition de texte comme indiqué dans mon HTML mockup

Quelqu'un peut-il s'il vous plaît aider. Merci!

Answer 1

Vous pouvez le faire avec :before pseudo-élément sur chaque 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>