Creating a sci-fi styled button navigation layout with clip-path design

@manchoco69

generate left(left of the screen) and right (right of the screen) button nav containers that, and a main center box content area, use clip-path for the borders, add margins, use white scifi colorway

DeepSeek V3

Here's a modern sci-fi styled layout with left/right navigation and a center content area:

Updated files

@manchoco69

white scifi , just use black and white colors

DeepSeek V3

Here's a minimalist black and white sci-fi layout with clip-path borders:

Updated files

@manchoco69

redo, remove clip-path, use this to imitate clip-path .custom-border { position: relative; padding: 2rem; background: white; z-index: 0; } .custom-border::before { content: ""; position: absolute; inset: 0; background: black; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); z-index: -1; }

DeepSeek V3

Here's the updated black and white sci-fi layout using the pseudo-element border technique:

Updated files

@manchoco69

apply this exactly .custom-border { position: relative; padding: 2rem; background: white; z-index: 0; } .custom-border::before { content: ""; position: absolute; inset: 0; background: black; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); z-index: -1; }

DeepSeek V3

Here's the updated version with the exact border styling you requested:

Updated files