form figure with css and vue - css

Question

I am trying to create this figure on my site, I am working with CSS and Vue, but so far I am not achieving this goal, I am really new to this
My objective:
What i have so far:
I have not really managed to make it look like the first image, any advice on how I can do it, since I am really new to this
<div id="paralelogramored" class="forma"></div>
<div id="paralelogramowhite" class="forma">
<a Class="">Iniciar Sesion</a>
<img style="float:left;" src="./assets/scss/images/loginLogo.png" class="imgLogin"/>
</div>
my css
.imgLogin{
width: 20px;
}
.forma{
display: inline-block;
margin: 16px;
}
#paralelogramored {
width: 150px;
height: 50px;
background: red;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding-top: 0px;
}
#paralelogramowhite {
width: 150px;
height: 50px;
background: white;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
padding-top: 0px;
}

Answer 1

You could achieve this by using the psuedo element :before. I've attached a quick example of what that could look like.
body {
background: url(https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/07/979c566babe3ae625a9ad7350c019677/a187611_large.jpg?itok=laveSilF) no-repeat;
background-size: cover;
margin: 0;
}
#banner {
width: 380px;
height: 55px;
position: relative;
overflow: visible;
margin: 0 0 0 auto;
background: #fff;
}
#banner:before {
content: '';
display: block;
z-index: 1;
position: absolute;
top: 0;
left: -30px;
background: red;
transform: skew(-45deg);
height: 100%;
width: 30%;
}
#banner .content {
margin-left: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
position: relative;
background: transparent;
}
<div id="banner">
<div class="content">
Content is positioned here
</div>
</div>