Responsive grid with CSS Grids

Responsive grid with CSS Grids

by jayesh1511

HTML

<div id="parent">
  <div class="diamond" id="top"></div>
  <div class="diamond" id="left"></div>
  <div class="diamond" id="right"></div>
  <div class="title" id="top-title">MITSUBISHI</div>
  <div class="title" id="bottom-title">MOTORS</div>
</div>

CSS

#parent {
  position: absolute;
  margin-top: 50px;
}


.diamond {
  width: 0;
  height: 0;
  border: 24px solid transparent;
  border-bottom: 40px solid red;
  position: absolute;
  top: -24px;
  margin: auto;
}

.diamond::after {
  content: '';
  position: absolute;
  left: -24px;
  top: 40px;
  width: 0;
  height: 0;
  border: 24px solid transparent;
  border-top: 40px solid red;
}

#left {
  left: 144px;
  transform: rotate(59deg);
  top: 50px;
}

#top {
  left: 150px;
}

#right {
  left: 156px;
  transform: rotate(-59deg);
  top: 50px;
}

.incline-line {
  width: 50%;
  margin: auto;
  margin-top: 40%;
  margin-bottom: 5%;
  transform: rotate(10deg);
  border-color: purple;
}

.title {
  width: 150px;
  margin: auto;
  font-size: 21px;
  font-weight: bold;
}

#top-title {
  width: 150px;
  margin-top: 130px;
  margin-left: 110px;
}

#bottom-title {
  position: relative;
  width: 100px;
  margin-left: 130px;
}