Back to CSS Split Screen Diagonal Split Pure CSS
Share
.ss-dia {
  position: relative;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0e10;
  color: #fff;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-dia-orange {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #ff5e1a 0%, #ff8a00 60%, #ffaa44 100%);
  clip-path: polygon(0 0, 56% 0, 32% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center;
}
.ss-dia-orange::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(60deg, transparent 0 30px, rgba(0,0,0,0.04) 30px 31px);
}
.ss-dia-num {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.85;
  color: #0e0e10;
  letter-spacing: -0.05em;
  transform: translateX(-22%) translateY(-4%);
  text-shadow: 0 6px 0 rgba(0,0,0,0.06);
  font-style: italic;
}
.ss-dia-black {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 56%;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 18px;
  z-index: 2;
}
.ss-dia-issue {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em;
  color: #ff8a00;
}
.ss-dia-black h2 {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ss-dia-italic {
  font-style: italic;
  font-weight: 300;
  color: #ff8a00;
  text-transform: lowercase;
  font-family: 'Cormorant Garamond', serif;
}
.ss-dia-black p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #b8b6b0;
  max-width: 380px;
}
.ss-dia-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-dia-list li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #fff;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ss-dia-list span {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #ff8a00;
}
.ss-dia-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 14px 26px;
  background: #ff5e1a;
  color: #0e0e10;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
}
.ss-dia-cta:hover { background: #ff8a00; }
.ss-dia-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .ss-dia { min-height: 580px; }
  .ss-dia-orange { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 50%); }
  .ss-dia-num { transform: translateX(0) translateY(-10%); font-size: 120px; }
  .ss-dia-black { width: 100%; top: 50%; padding-top: 36px; }
}
<section class="ss-dia" aria-label="Sport magazine cover">
  <div class="ss-dia-orange" aria-hidden="true">
    <span class="ss-dia-num">47</span>
  </div>
  <div class="ss-dia-black">
    <span class="ss-dia-issue">ISSUE 47 · MAY</span>
    <h2>FASTER<br/><span class="ss-dia-italic">than</span><br/>YESTERDAY.</h2>
    <p>Inside: how four runners broke their personal records by changing one thing.</p>
    <ul class="ss-dia-list">
      <li><span>01</span> The 6am rule</li>
      <li><span>02</span> Negative splits</li>
      <li><span>03</span> Track over road</li>
    </ul>
    <button type="button" class="ss-dia-cta">Read inside →</button>
  </div>
</section>
Live preview Edit any tab — preview updates live Ready