Banner cu forme geometrice

<div class="headline">
	<div class="headline-layer">
		<div class="headline-layer-bg1"></div>
		<div class="headline-layer-bg2"></div>
	</div>
	<div class="headline-layer">
		<div class="headline-layer-w">
			<div class="headline-layer-w-area-top">
				<div class="headline-layer-w-top">
					<div class="headline-layer-w-top-column"></div>
					<div class="headline-layer-w-top-column"></div>
					<div class="headline-layer-w-top-column"></div>
				</div>
				<div class="headline-layer-w-middle">
					<div class="headline-layer-w-middle-left"></div>
					<div class="headline-layer-w-middle-right">
						<div class="headline-layer-w-middle-column"></div>
						<div class="headline-layer-w-middle-column"></div>
						<div class="headline-layer-w-middle-column"></div>
					</div>
				</div>
				<div class="headline-layer-w-bottom">
					<div class="headline-layer-w-bottom-left"></div>
					<div class="headline-layer-w-bottom-right">
						<div class="headline-layer-w-bottom-right-column"></div>
						<div class="headline-layer-w-bottom-right-column"></div>
						<div class="headline-layer-w-bottom-right-column"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="headline-layer">
		<div class="headline-layer-txt">
			<div>Title level 1</div>
			<div>Subtitle level 2</div>
		</div>
	</div>
</div>

	.headline-layer:last-of-type,
	.headline-layer-w-area-top,
	.headline-layer-w-top,
	.headline-layer-w-middle,
	.headline-layer-w-middle-right,
	.headline-layer-w-bottom,
	.headline-layer-w-bottom-right{
		display: flex;
	}
	.headline-layer-w-top,
	.headline-layer-w-middle-right{
		align-items: center;
	}
	.headline-layer-w-area-top{
		justify-content: space-between;
	}
	.headline-layer-w-area-top{
		flex-direction: column;
	}
	.headline,
	.headline-layer-bg1{
		position: relative;
	}
	.headline-layer,
	.headline-layer-bg1:before,
	.headline-layer-w{
		position: absolute;
	}
	.headline-layer-w-top,
	.headline-layer-w-middle,
	.headline-layer-w-bottom{
		height: 30px;
	}
	.headline-layer-w-top-column,
	.headline-layer-w-middle-column{
		height: calc(100% - 10px);
	}
	.headline-layer,
	.headline-layer-txt div{
		overflow: hidden;
	}
	.headline-layer-w-top-column,
	.headline-layer-w-middle-column,
	.headline-layer-w-bottom-right-column{
		width: 20px;
		margin-left: 10px;
	}

	.headline{
		width: 100%;
		min-width: 100px;
		max-width: 1000px;
		height: 200px;
		margin: auto;
	}
		.headline-layer{
			width: 100%;
			height: 100%;
		}
		.headline-layer:last-of-type{
			justify-content: center;
			align-items: flex-end;
			flex-wrap: wrap;
			font-weight: bold;
		}
			.headline-layer-bg1,
			.headline-layer-bg2{
				height: 50%;
			}
			.headline-layer-bg1{
				background: #40474a;
			}
			.headline-layer-bg1:before{
				content: "";
				border: 100px solid transparent;
				border-top-color: #1e292d;
				border-left-color: #1e292d;
				top: 0;
				left: 0;
			}
			.headline-layer-bg2{
				background: #7c8386;
			}
			.headline-layer-w{
				width: 100%;
				height: 100%;
				background: #d2d3d5;
				transform: skew(-45deg);
				bottom: 0;
				right: -200px;
			}
				.headline-layer-w-area-top{
					height: 50%;
				}
					.headline-layer-w-top{
						background: #9f1c1e;
					}
						.headline-layer-w-top-column{
							background: #dc1f26;
						}
					.headline-layer-w-middle{}
						.headline-layer-w-middle-left{
							width: 60px;
						}
						.headline-layer-w-middle-right{
							width: calc(100% - 100px);
							background: #40474a;
						}
							.headline-layer-w-middle-column{
								background: rgba(0,0,0,0.4);
							}
					.headline-layer-w-bottom{}
						.headline-layer-w-bottom-left,
						.headline-layer-w-bottom-right-column{
							background: #1e292d;
						}
							.headline-layer-w-bottom-left{
								width: 120px;
							}
							.headline-layer-w-bottom-right{}
								.headline-layer-w-bottom-right-column{}
			.headline-layer-txt{
				min-width: 100px;
				text-align: center;
			}
				.headline-layer-txt div{
					padding: 10px;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.headline-layer-txt div:first-of-type{
					font-size: 28px;
					color: #1e292d;
				}
				.headline-layer-txt div:last-of-type{
					color: #9f1c1e;
				}