Compass EMI Graphic

by mrjordy

HTML

<div class="blurbtextbox black"><H2>Enterprise Market Intelligence</H2> Powered by COMPASS<br>EMI aligns an organization's initiative with industry capabilities by aggregating disparate sources of information into a cohesive, executable acquisition strategy.</div>
<div class="insertSpace"></div>
<div class="emiGraphicContainer">
  <div class="emiGraphicRoundBack"></div>
  <div class="emiGraphic">
    <div class="emiText TextBefore makebold">
      <div class="RotatedInformationSources">
        Information&nbsp;Sources
      </div>
    </div>
    <div class="emiFirstSectionContainer ContainerThird">
      <div class="emiFirstSection">
        <div class="RoundSwordShape FirstSword">
          <div class="SwordContentContainer">
            <div class="inlineblock SwordColumn1">
              <div class="FirstSwordImage"></div>
            </div>
            <div class="inlineblock SwordColumn2">
              <div class="RotatedPMW205">
                PMW&nbsp;205
              </div>
            </div>
            <div class="inlineblock SwordColumn3">
              Claimant Information
              <br> Service Design Package
              <br> NET
              <br> RAPT
            </div>
          </div>
        </div>
        <div class="RoundSwordShape SecondSword white">
          <div class="SwordContentContainer">
            <div class="inlineblock SwordColumn1">
              <div class="SecondSwordImage"></div>
            </div>
            <div class="inlineblock SwordColumn2">
              <div class="RotatedGovtAPIs">
                Government&nbsp;<span class="nobold">(APIs)</span>
              </div>
            </div>
            <div class="inlineblock SwordColumn3">
              D&amp;B Direct
              <br> USASpending.gov
              <br> Grants.gov
              <br> SAM
            </div>
          </div>
        </div>
        <div class="RoundSwordShape ThirdSword">
          <div class="SwordContentContainer">
           ...

CSS

.white {
  color: white;
}
.black {
  color: black;
}

.inlineblock {
  display: inline-block;
  vertical-align: middle;
}

.nobold {
  font-weight: 100;
}

.makebold {
  font-weight: bold;
}

.emiGraphicContainer {
  display: block;
  font-size: 16px;
  font-family: kalinga;
  color: black;
  line-height: 20px;
  position: relative;
  min-width: 1100px;
}

.emiGraphicRoundBack {
  display: block;
  background: #ccc;
  height: 460px;
  margin-bottom: -470px;
  margin-top: 10px;
  width: 100%;
  border-top-right-radius: 120px 250px;
  border-bottom-right-radius: 120px 250px;
  border-bottom-left-radius: 120px 250px;
  border-top-left-radius: 120px 250px;
}

.emiGraphic {
  width: 100%;
  height: 480px;
  display: block;
}

.TextBefore,
.TextAfter {
  width: 60px;
  height: 480px;
  display: inline-block;
  font-size: 20px;
}

.RotatedInformationSources {
  transform: rotate(-90deg);
  margin-top: 233px;
  position: absolute;
  margin-left: -68px;
}

.RotatedOutcomes {
  transform: rotate(90deg);
  margin-top: 231px;
  position: absolute;
  margin-left: -28px;
}

.ContainerThird {
  width: calc(100%/3 - 45.33px);
  height: 480px;
  display: inline-block;
  transition: .5s;
}


/*-----------------------------------first pane--------------------------------------*/

.emiFirstSectionContainer {
  margin-left: -4px;
}

.RoundSwordShape {
  height: 154px;
  width: calc(100% - 50px);
  display: block;
  font-weight: bold;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

.RoundSwordShape:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 77px solid transparent;
  border-bottom: 77px solid transparent;
  border-left: 44px solid red;
  margin-left: calc(100% - 1px);
}

.FirstSword,
.SecondSword {
  margin-bottom: 9px;
}

.FirstSword {
  background: #ffdb79;
}

.FirstSword:after {
  border-left: 44px solid #ffdb79;
}

.SecondSword {
  background: #474f59;
}

.SecondSword:after {
  border-left: 44px solid...