<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Triangles – Quick Examples</title>
<style>
:root { --size: 60px; --color: #4f46e5; --bg: #0b1020; --fg: #e5e7eb; }
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--fg);}
.wrap{max-width:980px; margin:24px auto; padding:24px}
h1{margin:0 0 6px; font-size:clamp(20px,3vw,32px)}
p{margin:0 0 18px; color:#a6adbb}
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px}
.card{background:#0f162d; border:1px solid #1f2942; border-radius:18px; padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.25)}
.title{font-weight:600; font-size:14px; letter-spacing:.3px; margin-bottom:10px; color:#c7d2fe}
.box{display:flex; align-items:center; justify-content:center; height:140px}
code{display:block; white-space:pre-wrap; background:#0b1226; border:1px solid #1c2546; padding:10px; border-radius:12px; color:#d1d7ff; font-size:12px}
/* 1) Border trick triangles (no extra markup size) */
.tri-up{ width:0; height:0; border-left: calc(var(--size) * .6) solid transparent; border-right: calc(var(--size) * .6) solid transparent; border-bottom: var(--size) solid var(--color); }
.tri-down{ width:0; height:0; border-left: calc(var(--size) * .6) solid transparent; border-right: calc(var(--size) * .6) solid transparent; border-top: var(--size) solid var(--color); }
.tri-left{ width:0; height:0; border-top: calc(var(--size) * .6) solid transparent; border-bottom: calc(var(--size) * .6) solid transparent; border-right: var(--size) solid var(--color); }
.tri-right{ width:0; height:0; border-top: calc(var(--size) * .6) solid transparent; border-bottom: calc(var(--size) * .6) solid transparent; border-left: var(--size) solid var(--color); }
/* 2) Equilateral triangle using clip-path (true triangle box) */
.tri-eq{ width: calc(var(--size) * 2); height: calc(var(--size) * 1.732); background: #ef4444; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
/* 3) Triangle with outline (border + pseudo-element) */
.tri-outline{ position:relative; width:0; height:0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 70px solid #10b981; }
.tri-outline::before{ content:""; position:absolute; left:-44px; top:5px; border-left: 44px solid transparent; border-right: 44px solid transparent; border-bottom: 78px solid #0b1020; }
/* 4) Tooltip style caret using :after */
.tooltip{ position:relative; background:#111827; padding:10px 12px; border-radius:10px; border:1px solid #1f2937; display:inline-block; }
.tooltip::after{ content:""; position:absolute; left:18px; bottom:-10px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #111827; filter:drop-shadow(0 -1px 0 #1f2937); }
.tooltip-wrap{ display:flex; align-items:center; justify-content:center; height:140px }
/* Helper */
.row{display:flex; gap:10px; align-items:center; justify-content:center}
.knob{display:flex; gap:10px; align-items:center; margin:14px 0 0}
input[type="color"], input[type="range"]{accent-color:#6366f1}
</style>
</head>
<body>
<div class="wrap">
<h1>CSS Triangles</h1>
<p>Common ways to draw triangles in pure CSS: the classic <b>border trick</b>, <b>clip-path</b> for true equilateral shapes, and a tooltip caret with <b>pseudo-elements</b>.</p>
<div class="knob">
<label>Color <input id="col" type="color" value="#4f46e5" /></label>
<label>Size <input id="sz" type="range" min="24" max="110" value="60" /></label>
</div>
<div class="grid" style="margin-top:16px">
<div class="card">
<div class="title">Up (border trick)</div>
<div class="box"><div class="tri-up"></div></div>
<code>.tri-up{width:0;height:0;border-left:36px solid transparent;border-right:36px solid transparent;border-bottom:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Right (border trick)</div>
<div class="box"><div class="tri-right"></div></div>
<code>.tri-right{width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-left:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Down (border trick)</div>
<div class="box"><div class="tri-down"></div></div>
<code>.tri-down{width:0;height:0;border-left:36px solid transparent;border-right:36px solid transparent;border-top:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Left (border trick)</div>
<div class="box"><div class="tri-left"></div></div>
<code>.tri-left{width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-right:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Equilateral (clip-path)</div>
<div class="box"><div class="tri-eq"></div></div>
<code>.tri-eq{width:120px;height:207.8px;background:#ef4444;clip-path:polygon(50% 0, 0 100%, 100% 100%)}</code>
</div>
<div class="card">
<div class="title">Tooltip caret (pseudo-element)</div>
<div class="tooltip-wrap"><span class="tooltip">Hello! I have a tail</span></div>
<code>.tooltip::after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #111827}</code>
</div>
</div>
</div>
<script>
// small controls to tweak color/size live
const col = document.getElementById('col');
const sz = document.getElementById('sz');
const root = document.documentElement.style;
col.addEventListener('input', e => root.setProperty('--color', e.target.value));
sz.addEventListener('input', e => root.setProperty('--size', e.target.value + 'px'));
</script>
</body>
</html>
Preview
