Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Triangle using border trick */ .tooltip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-bottom-color: #333; } /* Diagonal section divider */ .section::after { content: ""; display: block; height: 60px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
Result
Open