Three way split with clip-path

Developer
Mandy Michael
Size
2,852 Kb
Views
10,120
  1. Three way split with clip-path Previews
  2. Three way split with clip-path HTML Codes
  3. Three way split with clip-path CSS Codes
  4. Three way split with clip-path JS Codes

How do I make an three way split with clip-path?

Vertical split layout with colour text at the split! Inspired by: http://fillet.com.br/Just playing around with different css properties to create fun text effects :). What is a three way split with clip-path? How do you make a three way split with clip-path? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.

Three way split with clip-path Previews
IQ Test

Three way split with clip-path - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Three way split with clip-path</title> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 contenteditable data-heading="The spectacle before us was indeed sublime">The spectacle before us was indeed sublime</h1> <script src="js/index.js"></script>
</body>
</html>

Three way split with clip-path - Script Codes CSS Codes

html { background: -webkit-linear-gradient(left, #badab3 30%, #f1a43c 30%, #f1a43c 70%, #d5642a 70%); background: linear-gradient(to right, #badab3 30%, #f1a43c 30%, #f1a43c 70%, #d5642a 70%); height: 100%;
}
body { padding: 2rem; height: 100%;
}
h1 { font-size: 11vw; top: 50%; left: 0; margin: 0; padding: 0 2rem; box-sizing: border-box; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); position: absolute; color: #f1ebc9; width: 100%; text-align: center; font-family: 'Lobster', cursive;
}
h1:before, h1:after { content: attr(data-heading); overflow: hidden; position: absolute; top: 0; left: 0; z-index: 3; width: 100%; text-align: center; padding: 0 2rem; box-sizing: border-box;
}
h1:after { color: #f1a43c; -webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%); clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%);
}
h1:before { color: #bdd9b2; -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%); clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%);
}

Three way split with clip-path - Script Codes JS Codes

// JS is to make the text editable fot demo purpose, not required for the effect. Thanks for the suggestion @chriscoyier!
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() { this.setAttribute("data-heading", this.innerText);
});
Three way split with clip-path - Script Codes
Three way split with clip-path - Script Codes
Home Page Home
Developer Mandy Michael
Username mandymichael
Uploaded December 16, 2022
Rating 4.5
Size 2,852 Kb
Views 10,120
Do you need developer help for Three way split with clip-path?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mandy Michael (mandymichael) Script Codes
Name
Vertical split layout text effect
Split fractured text
Flickering Light Text Effect
Single element, multi coloured 3d text effect
Custom Underlines on Headings
Layered fonts in css
Multi coloured animated css text
CSS Batman Mask
Editable layered textured fonts
Think outside the div
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!