CSS Triangles and Pseudo Elements

css-triangles-and-pseudo-elements.markdown

CSS Triangles and Pseudo Elements

A Pen by albert on CodePen.

License.

index.html

<div id="box">
  <div class="arrow-up">
    <div id="triangle-row-top">
      <label>
        <span id="top-first">LAP</span>
        <span id="top-second">Program</span>
        <span id="top-third">Wide</span>
        <span id="top-fourth">Review</span></label>
    </div>
    <div id="triangle-row-middle">
      <label>Project Review</label>
    </div>
    <div id="triangle-row-bottom">
      <label>Functional Reviews</label>
    </div>
    
    
  </div>
</div>

<div class="arrow-left"></div>
<div class="arrow-right"></div>
<div class="arrow-down"></div>
<br />
<div class="arrow-right-red"></div>

<div class="lock"></div>
<br />
<br />
<div class="lock"></div>
<br />
<br />

style.css

#box{
  margin:20px auto 60px auto;
  outline:1px solid #000;
  width:600px;
  height:600px;
}

.arrow-up {
  height: 0px;
  width: 0px;
  position: relative;
}
.arrow-up:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  height: 0px;
  width: 0px;
  border-right: solid 300px #fff;
  border-left: solid 300px #fff;
  border-bottom:solid 600px transparent;
  z-index:150;
}

#triangle-row-top,
#triangle-row-middle,
#triangle-row-bottom{
  height:200px;
  width:600px;
  position:relative;
  z-index:100;
}
#triangle-row-top{
  background-color:#ff9;
}
#triangle-row-middle{
  background-color:#cc9;
}
#triangle-row-bottom{
  background-color:#aa9;
}

#triangle-row-top label{
  position:absolute;
  top:50px;
  left:250px;
  width:100px;
  height:200px;
  z-index:400;
}
#triangle-row-middle label{
  position:absolute;
  top:100px;
  left:250px;
  width:100px;
  height:200px;
  z-index:400;
}
#triangle-row-bottom label{
  position:absolute;
  top:100px;
  left:250px;
  width:100px;
  height:200px;
  z-index:400;
}
#triangle-row-top label span{
  display:block;
  text-align:center;
}
.arrow-down {
  height: 0px;
  width: 0px;
  position: relative;
  border-right: solid 150px transparent;
  border-left: solid 150px transparent;
  border-top: solid 150px black;
}

.arrow-left {
  height: 0px;
  width: 0px;
  position: relative;
  border-right: solid 25px black;
  border-bottom: solid 25px transparent;
  border-top: solid 25px transparent;
}

.arrow-right {
  height: 0px;
  width: 0px;
  position: relative;
  border-top: solid 25px transparent;
  border-left: solid 25px black;
  border-bottom: solid 25px transparent;
}

.arrow-right-red {
  height: 0px;
  width: 0px;
  position: relative;
  border-top: solid 25px transparent;
  border-left: solid 25px black;
  border-bottom: solid 25px transparent;
}

.arrow-right-red:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -20px;
  height: 0px;
  width: 0px;
  border-top: solid 15px transparent;
  border-left: solid 15px red;
  border-bottom: solid 15px transparent;
}

.lock {
  position: relative;
  height: 50px;
  width: 50px;
  background: #000;
  top: 50px;
  left: 50%;
}

.lock:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 3px;
  height: 40px;
  width: 30px;
  background: none;
  border-top: solid 7px #000;
  border-right: solid 7px #000;
  border-left: solid 7px #000;
  border-radius: 20px 20px 20px 20px;
}

.lock:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 20px;
  height: 25px;
  width: 10px;
  background: #fff;
  border-radius: 20px 20px 0px 00px;
}