CodePen Embed - text + double triangle

	<div class="wrap">
		<div class="info">
			<div class="info-col info-col-left">
				<div class="info-item orange">
					<div class="info-item-text">
						<h3>Lorem <span class="mark">ipsum.</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ex nisi sapiente consectetur quis quaerat vitae commodi, dolores tempora, in quasi fugiat sequi.</p>
					</div>
					<div class="info-item-wrap">
						<div class="info-item-triangle">
							<div class="triangle triangle-top"></div>
							<div class="triangle triangle-bottom"></div>
							<div class="icon sprite-dollar"></div>
						</div>
					</div>
				</div>
				<div class="info-item green">
					<div class="info-item-text">
						<h3>Lorem <span class="mark">ipsum.</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ex nisi sapiente consectetur quis quaerat vitae commodi, dolores tempora, in quasi fugiat sequi.</p>
					</div>
					<div class="info-item-wrap">
						<div class="info-item-triangle">
							<div class="triangle triangle-top"></div>
							<div class="triangle triangle-bottom"></div>
							<div class="icon sprite-stats"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="info-col info-col-right">
				<div class="info-item red">
					<div class="info-item-text">
						<h3>Lorem <span class="mark">ipsum.</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ex nisi sapiente consectetur quis quaerat vitae commodi, dolores tempora, in quasi fugiat sequi.</p>
					</div>
					<div class="info-item-wrap">
						<div class="info-item-triangle">
							<div class="triangle triangle-top"></div>
							<div class="triangle triangle-bottom"></div>
							<div class="icon sprite-search"></div>
						</div>
					</div>
				</div>
				<div class="info-item blue">
					<div class="info-item-text">
						<h3>Lorem <span class="mark">ipsum.</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ex nisi sapiente consectetur quis quaerat vitae commodi, dolores tempora, in quasi fugiat sequi.</p>
					</div>
					<div class="info-item-wrap">
						<div class="info-item-triangle">
							<div class="triangle triangle-top"></div>
							<div class="triangle triangle-bottom"></div>
							<div class="icon sprite-man"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="text-down">
		<div class="wrap">
			<h2>Lorem <span class="mark">ipsum.</span></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt eaque quos adipisci vitae repellendus assumenda officiis ex eveniet amet illo molestias dolor doloremque rem, nobis delectus aliquid natus voluptatum recusandae!</p>
		</div>
	</div>

@charset "UTF-8";

/////
//COLOR
////
$bg: #e7e7e7;
$h1-gray: #4e4e4e;
$h1-green: #0cb0af;

$red: #ef4756;
$dark-red: #db4457;
$orange: #f78f30;
$dark-orange: #ea7d2b;
$blue: #125f8d;
$dark-blue: #0f556f;
$green: #1bbdc8;
$dark-green: #0db0af;

$header-grey: #646464;
$d-header-grey: #434b56;
$text-c: #cccccc;
$d-text-c: #b1b1b1;

////
// FONT
////

$text: 'Open Sans', sans-serif;

////
// 	HEIGHT
////
 $h-triangle: 11rem;
 $h-triangle-md: $h-triangle - 3rem ;


body {
	font-size: 16px;
	margin: 0;
	padding: 0;
	background: $bg;
  font-family: $text;
}

h1, h2, h3, h4, h5, h6 {
	font-family: $text;
	font-weight: 800;
	text-transform: uppercase;
}

img { max-width: 100%; }

:focus { outline: none; }
.wrap {
	max-width: 2050px;
	margin: 0 auto;
	padding: 3em;
	& h1 {
		color: $h1-gray;
		margin: 1rem 0 2rem;
		& .mark {
			color: $h1-green; 
			display: block;
			margin-top: 1rem;
		}
	}
}

.info {
  display:flex;
	flex-wrap: wrap;
	justify-content:space-between; 
	overflow: hidden;
	&-col {width: 37%;}
	&-col-left {
		box-shadow:10px 0 24px -16px rgba(0,0,0,0.75);
		padding-top: $h-triangle + 9rem;
		& .info-item {
			&-wrap {right: 0;}
			&-text {box-shadow:10px 13px 30px -15px rgba(0, 0, 0, 0.75);}
		}
		& .triangle {
			left: 0;
		}
		& .icon {left: 3rem;}
		& .info-item-text {text-align: right;}
	}
	&-col-right {
		box-shadow: -10px 0 24px -16px rgba(0,0,0,0.75);
		padding-top: 8rem;
		& .info-item {
			&-wrap {left: 0;}
			&-text {box-shadow:-10px 13px 30px -15px rgba(0, 0, 0, 0.75);}

		}
		& .triangle {
			right: 0;
		}
		& .icon {right: 3rem;}
	}
	&-item {
		position: relative;
		margin-bottom: 2em;
		&-wrap {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 0;
		}
		&-triangle {
			position: relative; 
			height:  $h-triangle * 2;
			.triangle {
			    width: 0;
			    height: 0;
			    position: absolute;
			    &.triangle-top {
			    	border-top: $h-triangle solid transparent;
					border-bottom: 1px solid transparent;
			    }
			    &.triangle-bottom {
			    	border-top: 1px solid transparent;
					border-bottom: $h-triangle solid transparent;
					bottom: 0;
				}
			}
		    & .icon {
    			position: absolute;
    			top: 50%;
				transform: translateY(-50%);
		    }
		}
		&-text { 
			box-sizing:border-box;
			background: #fff;
			padding: 2em;
			min-height: $h-triangle * 2;
			position: relative;
			z-index: 1;
			& h3 {
				font-size: 1.5em;
				color: $header-grey;
				padding: 1em 0; 
			}
			& p {
				color: $text-c;
				font-weight: 700;
			}
		}
		&.orange {
			.triangle {
				&-top {
					border-left-width : $h-triangle + 8rem;
					border-left-style : solid;
					border-left-color : $orange;
				}
				&-bottom {
					border-left-width : $h-triangle + 8rem;
					border-left-style : solid;
					border-left-color : $dark-orange;
				}
			}
			& .icon {
		    	width: 80px;
    			height: 80px;
    		}
    		& .mark {color: $orange;}
		}
		&.green {
			.triangle {
				&-top {
					border-left-width : $h-triangle + 8rem;
					border-left-style : solid;
					border-left-color : $green;
				}
				&-bottom {
					border-left-width : $h-triangle + 8rem;
					border-left-style : solid;
					border-left-color : $dark-green;
				}
			}
			& .icon {
		    	width: 80px;
    			height: 72px;
    		}
    		& .mark {color: $green;}
		}
		&.red {
			& .icon {
		    	width: 72px;
    			height: 72px;
    		}
    		.triangle {
				&-top {
					border-right-width : $h-triangle + 8rem;
					border-right-style : solid;
					border-right-color : $red;
				}
				&-bottom {
					border-right-width : $h-triangle + 8rem;
					border-right-style : solid;
					border-right-color: $dark-red;
				}
			}
			& .mark {color: $red;}
		}
		&.blue {
			& .icon {
		    	width: 75px;
    			height: 72px;
    		}
    		.triangle {
				&-top {
					border-right-width : $h-triangle + 8rem;
					border-right-style : solid;
					border-right-color : $blue;
				}
				&-bottom {
					border-right-width : $h-triangle + 8rem;
					border-right-style : solid;
					border-right-color : $dark-blue;
				}
			}
			& .mark {color: $blue;}
		}

	}
}
.text-down {
	box-shadow:3px 2px 31px -6px rgba(0,0,0,0.75);
	background: #ffffff;
	margin-bottom: 10rem;

	& h2 {
		color: $d-header-grey;
		font-size: 2em;
		margin-bottom: .25em;
		& .mark {color: $orange;}
	}
	& p {
		font-size: 1.4em;
		color: $d-text-c;
	}
}
////
// 	MEDIA
////


$xs: 400px;
$sm: 640px;
$md: 970px;
$lg: 1170px;
$xl: 1366px;
@media screen and (min-width: $xs + 1) and (max-width: $xl - 1) {
	div.info {
		&-item {
			&-triangle {
				height:  $h-triangle-md * 2;
				.triangle {
					&.triangle-top { border-top: $h-triangle-md solid transparent; }
			    	&.triangle-bottom { border-bottom: $h-triangle-md solid transparent;}
				}
			}
			&-text { min-height: $h-triangle-md * 2;}
			&.orange {
				.triangle {
					&-top {border-left-width: $h-triangle-md + 2rem;}
					&-bottom {border-left-width: $h-triangle-md + 2rem;}
				}
			}
			&.green {
				.triangle {
					&-top {border-left-width: $h-triangle-md + 2rem;}
					&-bottom {border-left-width: $h-triangle-md + 2rem;}
				}
			}
			&.red {
	    		.triangle {
					&-top {border-right-width: $h-triangle-md + 2rem;}
					&-bottom {border-right-width: $h-triangle-md + 2rem;}
				}
			}
			&.blue {
	    		.triangle {
					&-top {border-right-width: $h-triangle-md + 2rem;}
					&-bottom {border-right-width: $h-triangle-md + 2rem;}
				}
			}
		}
		&-col {
			&-right {
				padding-top: 1rem;
				& .icon {right: 1.25rem;} 
			}
			&-left {
				padding-top: $h-triangle-md + 2.5rem;
				& .icon {left: 1.25rem;}
			}
		}
	}
}

@media screen and(min-width: $sm + 1) and (max-width: $xl - 1) {
	body {font-size: 16px;}

}

@media screen and (max-width: $sm) {
	body {font-size: 14px;}
}
@media screen and (max-width: $md) {
	div.info {
		flex-direction:column;
		&-col {
			width: 65%;
			padding-top: 2rem;
		}
		&-item {
			&-text {text-align: right;}
			&.red {
	    		.triangle {
					&-top {border-left:$h-triangle-md + 2rem solid $red; border-right: none;}
					&-bottom {border-left:$h-triangle-md + 2rem solid $dark-red; border-right: none;}
				}
			}
			&.blue {
	    		.triangle {
					&-top {border-left:$h-triangle-md + 2rem solid $blue; border-right: none;}
					&-bottom {border-left:$h-triangle-md + 2rem solid $dark-blue; border-right: none;}
				}
			}
		}
		&-col-right {
			box-shadow:10px 0 24px -16px rgba(0, 0, 0, 0.75);
			& .info-item-wrap {left: auto; right: 0;}
			& .triangle {left: 0; right: auto;}
			& .icon {right: auto; left: 1.25rem;}
		}
	}
}
@media screen and (max-width: $xs) {
	.wrap div.info {
		&-item {
			&-wrap {display: none;}
			&-text {min-height: 12rem; text-align: left;}
		}
	}
	div.info-col {
		box-shadow:none;
		width: 100%;
	}
}

View Compiled

This Pen is owned by Mary on CodePen.

See more by @MaryLobareva on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.