Techniques
Diagonal Red Wedge Accent
A signature Constructivist treatment: a sharp red diagonal element that slashes across a composition, inspired by Lissitzky's "Beat the Whites with the Red Wedge."
.red-wedge {
position: relative;
overflow: hidden;
}
.red-wedge::after {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 60%;
height: 140%;
background: #d40000;
transform: rotate(-30deg);
transform-origin: center;
z-index: 0;
pointer-events: none;
}
Hard Offset Shadow Block
Mechanical offset shadows that evoke misregistered print blocks — a Constructivist signature replacing soft CSS box-shadow.
.offset-block {
position: relative;
background: #ffffff;
border: 3px solid #000000;
}
.offset-block::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: 100%;
height: 100%;
background: #000000;
z-index: -1;
}
.offset-block:hover {
transform: translate(-2px, -2px);
}
.offset-block:hover::before {
top: 8px;
left: 8px;
}
Rotated Uppercase Label
Diagonal text placement — the Constructivist signature of breaking horizontal reading lines to arrest attention.
.rotated-label {
display: inline-block;
font-family: 'Archivo Black', Impact, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffffff;
background: #d40000;
padding: 4px 16px;
transform: rotate(-5deg);
transform-origin: left center;
border: 2px solid #000000;
}