doubleedesign/_box.scss

## _box.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%);
        }
      }
    }
  }
}


## demo.html
<!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>
	$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>