JSFiddle - React, Tailwind, and code Playground

by ydelmas

HTML

<p>Lorem ipsum dolor sit amet</p>
<div class="test">
    <div class="trapeze"></div>
    <div class="triangle"></div>
    <div class="rectangle"></div>
    <div class="trapeze2"></div>
</div>
<p>Lorem ipsum dolor sit amet</p>

CSS

body {
	margin: 0;
	padding: 0;
	min-width: 960px;
}

.test {
	width: 960px; height: 300px; overflow: hidden;
	margin: 0 auto;
    position: relative; // → cadre de référence
}

.rectangle{
	width:895px;height:151px; 
	position:absolute; z-index: 98;
	background:blue;
	left:27px;top: 55px; // ne pas utiliser les marges
	-ms-transform: rotate(-2.5deg); /* IE 9 */
    -webkit-transform: rotate(-2.5deg); /* Chrome, Safari, Opera */
    transform: rotate(-2.5deg);
}

.trapeze{
	width:1px;height:100px;
	position:absolute; z-index: 98;
    border-style: solid;
    border-color: transparent transparent transparent red; 
	border-width: 70px;
	left: -71px;top: -20px;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

.trapeze2{
	width:13px;height:60px;
	position:absolute; z-index: 98;
	border-style: solid;
	border-color: transparent transparent transparent green;
	border-width: 40px;
	left:710px;top: 44px;
	-ms-transform: rotate(357.5deg); /* IE 9 */
    -webkit-transform: rotate(357.5deg); /* Chrome, Safari, Opera */
    transform: rotate(357.5deg);
}

.triangle{
	width:1px;height:1px;
	border:1px solid #069; position:absolute; z-index: 98;
	border-color:transparent transparent yellow transparent;
	border-width:40px;
	-ms-transform: rotate(67.5deg); /* IE 9 */
    -webkit-transform: rotate(67.5deg); /* Chrome, Safari, Opera */
    transform: rotate(67.5deg);
    left:12.5px;top:132px; 
}