Zigzag Hr - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zigzag HR</title> <style> body { font-family: Arial, sans-serif; background-color: #ffffff; padding: 20px; } .zigzag-hr { position: relative; border: none; height: 20px; background: linear-gradient(to right, transparent 50%, #ff7f50 50%); background-size: 20px 100%; margin: 50px 0; } .zigzag-hr::before, .zigzag-hr::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: #ff7f50; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .zigzag-hr::before { left: 0; } .zigzag-hr::after { right: 0; } </style> </head> <body> <h1>Zigzag Horizontal Rule</h1> <p>A zigzag pattern creates an eye-catching effect for this horizontal rule.</p> <hr class="zigzag-hr"> </body> </html>