I've been attempting to replicate this design on my website using CSS and Vue, but I'm struggling to achieve the desired result. As a newcomer to this, I could really use some guidance.
Here is my goal:
https://i.sstatic.net/WI9Wr.png
This is what I have managed to create so far:
https://i.sstatic.net/iVDkF.png
I haven't quite nailed the look of the first image. Any tips on how I can improve it?
<div id="parallelogramred" class="shape"></div>
<div id="parallelogramwhite" class="shape">
<a class="">Sign In</a>
<img style="float:left;" src="./assets/scss/images/loginLogo.png" class="imgLogin">
</div>
Here's my CSS:
.imgLogin{
width: 20px;
}
.shape{
display: inline-block;
margin: 16px;
}
#parallelogramred {
width: 150px;
height: 50px;
background: red;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding-top: 0px;
}
#parallelogramwhite {
width: 150px;
height: 50px;
background: white;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding-top: 0px;
}