Witam.
Od kilku godzin próbuje na różne sposoby uzyskać w CSS efekt taki jak na obrazku
ale ciągle div nr.3 (obrazek 3) układa się nieprawidłowo.Nie proszę o gotowe rozwiązanie a jedynie o wskazówkę jak osiągnąć pożądany efekt.
Mój kod:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="div1" >
<P> 1 </P>
</div>
<div class="div2">
<P> 2 </P>
</div>
<div class="div3">
<P> 3 </P>
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.container div.div1
{
width:43%;
height: 100%;
background-color: aqua;
transform-origin:top right;
transform: skewX(-13deg);
}
.container div.div2
{
width:33%;
height: 100%;
background-color: black;
transform-origin:top right;
transform: skewX(-13deg);
}
.container div.div3
{
width:30%;
height: 100%;
background-color: orange;
transform-origin:bottom left;
transform: skewX(-13deg);
}
p{
text-align: center;
position: relative;
top: 300px;
color: aliceblue;
}