Skip to content

Instantly share code, notes, and snippets.

@doubleedesign
Last active March 19, 2023 10:27
Show Gist options
  • Save doubleedesign/5ed59619ca88c3f7c441e256712b98eb to your computer and use it in GitHub Desktop.
Save doubleedesign/5ed59619ca88c3f7c441e256712b98eb to your computer and use it in GitHub Desktop.
Vertically centred CSS arrow/triangle on side of box. Demo: https://codesandbox.io/s/css-arrowbox-demo-8pif6y?file=/src/styles.scss
$spacing: (
xs: 0.25rem,
sm: 0.5rem,
md: 0.75rem,
lg: 1rem,
xl: 1.5rem,
xxl: 2rem
);
$colours: (
light: #E6E6FA
);
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.row {
max-width: 900px;
margin: 1rem auto;
display: flex;
flex-wrap: wrap;
.box {
position: relative;
padding-left: map-get($spacing, 'lg');
&__inner {
background: map-get($colours, 'light');
padding: map-get($spacing, 'lg');
@media screen and (min-width:1200px) {
padding: map-get($spacing, 'xl');
}
}
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: map-get($spacing, 'lg');
height: map-get($spacing, 'lg');
z-index: -1;
@media screen and (min-width:720px) {
width: map-get($spacing, 'xl');
height: map-get($spacing, 'xl');
}
@media screen and (min-width:1020px) {
width: map-get($spacing, 'xxl');
height: map-get($spacing, 'xxl');
}
}
&:before {
bottom: 50%;
background-image: linear-gradient(135deg, transparent 50%, map-get($colours, 'light') 0%);
}
&:after {
top: 50%;
background-image: linear-gradient(45deg, transparent 50%, map-get($colours, 'light') 0%);
}
}
&:nth-of-type(odd) {
.box {
&__inner {
order: 2;
}
}
}
&:nth-of-type(even) {
.box {
&__inner {
order: 1;
}
@media screen and (min-width:720px) {
padding-left: 0;
padding-right: map-get($spacing, 'xl');
}
@media screen and (min-width:1200px) {
padding-right: map-get($spacing, 'xxl');
}
&:before,
&:after {
@media screen and (min-width:720px) {
left: unset;
right: 0;
}
}
&:before {
@media screen and (min-width:720px) {
background-image: linear-gradient(225deg, transparent 50%, map-get($colours, 'light') 0%);
}
}
&:after {
@media screen and (min-width:720px) {
background-image: linear-gradient(315deg, transparent 50%, map-get($colours, 'light') 0%);
}
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>CSS arrow/triangle</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="row">
<div class="box">
<div class="box__inner">
<p>
Just to be clear, comedy with the plates will not be well-received.
Joey doesn't share food! The messers become the messees. I'm not
great at the advice. Can I interest you in a sarcastic comment?
</p>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="box__inner">
<p>
If it's not a right angle, it's a wrong angle. We might still have
some money if your father hadn't thought it was a good idea to sell
ice over the internet. There's an old Russian expression...Roughly
translated, it means: "This thing that I'm looking at: Wow."
</p>
<p>
I'm sorry, it was a one-time thing. I was very drunk, and it was
someone else's subconscious. What was I thinking at dinner? "Do you
want soup or salad?" Both! Always order both! I'm sure you’re right,
but why? You can't just give up. Is that what a dinosaur would do?
</p>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="box__inner">
<p>
It's a moo point. It’s like a cow's opinion; it doesn't matter.
It's moo. What's the difference between beer and lager? I don't
know. We could look it up. Things are about to get wild. Gum would
be perfection Where do you want to go to lunch? Mama's Little
Bakery, Chicago, Illinois. We might still have some money if your
father hadn't thought it was a good idea to sell ice over the
internet. If you want to receive emails about my upcoming shows,
please give me money so I can buy a computer. Gum would be
perfection.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment