Skip to content

Instantly share code, notes, and snippets.

@UltiRequiem
Created September 27, 2022 04:16
Show Gist options
  • Save UltiRequiem/3ca1bd4b05ba91b588729d60d3300ad3 to your computer and use it in GitHub Desktop.
Save UltiRequiem/3ca1bd4b05ba91b588729d60d3300ad3 to your computer and use it in GitHub Desktop.
arrow-like containers
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="cool red-bg">
<h2>One</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam culpa
reiciendis quod tempora totam in unde ullam necessitatibus molestias
perspiciatis quidem molestiae iure maiores labore eligendi mollitia
numquam, dolor consequuntur!
</div>
<div class="cool blue-bg">
<h2>Two</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas,
officiis voluptates fugit nam dolores earum amet possimus doloremque!
Reprehenderit itaque expedita illo esse nobis velit aliquid minima.
Ratione, est?
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
<defs>
<marker
id="arrowhead"
markerWidth="10"
markerHeight="7"
refX="0"
refY="3.5"
orient="auto"
>
<polygon points="0 0, 10 3.5, 0 7" />
</marker>
</defs>
<line
x1="0"
y1="50"
x2="250"
y2="50"
stroke="#000"
stroke-width="8"
marker-end="url(#arrowhead)"
marker-start="url(#arrowhead)"
/>
</svg>
<div class="cool red-bg">
<h2>Three</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptas
hic magni ab, exercitationem neque inventore! Expedita nemo blanditiis
pariatur autem aliquam est perspiciatis, ex molestiae, saepe, sunt maxime
cumque?
</div>
</body>
</html>
* {
}
.cool {
clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
}
.red-bg {
background-color: red;
}
.blue-bg {
background-color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment