How to make CSS translucent two shapes look like one? - html

Question

Problem
I drew 2 overlapping figures with CSS.
Because it is translucent, overlapping parts stand out.
I want to make it translucent like this when hovering, but can we do something like synthesize figures?
(I also mind that the end of transition of two figures is different..)
What I tried
I thought that the overlapping part could be deleted with overflow: hidden;, but it was not applicable to the & :: before element which diagonal cut part got lost.
Central placement problem
I would like to centrally align the letters in the tabs in this way.
Code
html { font-size: 62.5%; }
body { background-color: #c6d2dd; }
header { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; } /* reset */
header ul {
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
width: 100%;
margin-bottom: -1px;
}
header li {
font-size: 1.5rem;
height: 4.5rem;
padding-left: .4rem;
}
header li:first-child {
padding-left: 1.5rem;
}
header li:last-child {
padding-right: .5rem;
}
header li > a {
text-decoration: none;
display: block;
padding: 1rem 2rem;
height: 100%;
color: #fff;
outline: none;
transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
position: relative;
border-radius: 9px 5px 0 0;
}
/* from here */
header li > a:hover { /* The rectangular part on the right side */
background-color: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
header li > a:hover::before { /* Part of oblique cut on the left side */
background-color: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}
header li > a::before { /* Part of oblique cut on the left side */
content: '';
position: absolute;
z-index: 1;
top: 0;
left: -.4rem;
bottom: 0;
width: 1rem;
transition: background-color 0.3s ease-in;
transform: skew(-15deg);
border-radius: 5px 0 0 0;
}
.current a { /* add from here */
border: 1px solid #fff;
border-bottom-width: 0;
z-index: 3;
background-color: #9bacbb;
pointer-events: none;
margin-bottom: -3px;
}
.current a::before {
border: 1px solid #fff;
background-color: #9bacbb;
margin: -1px 0 -3px -1px;
z-index: 3;
left: -.5rem;
}
.current a::after {
content: '';
position: absolute;
z-index: 3;
top: 0;
left: -.4rem;
bottom: 0;
width: 1rem;
transform: skew(-15deg);
border-radius: 5px 0 0 0;
margin-bottom: -3px;
background-color: #9bacbb;
}
.content {
display: flex;
margin: 0 1rem 1rem 1rem;
width: 100vw;
height: 61.9rem;
position: relative;
background: #9bacbb;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.5);
}
<header>
<nav>
<ul>
<li class="111">
<a href="#">
111
</a>
</li>
<li class="222">
<a href="#">
222
</a>
</li>
<li class="333">
<a href="#">
333
</a>
</li>
<li class="444">
<a href="#">
444
</a>
</li>
<li class="current">
<a href="#">
555
</a>
</li>
</ul>
</nav>
</header>
<div class="content"> <!-- add -->
Hello world
</div>

Answer 1

I would do this differently with only one element. The trick is to have the skew and hide the overflowing part on the right:
check comment on the code
html { font-size: 62.5%; }
body { background-color: #c6d2dd; }
header { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; } /* reset */
header ul {
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
width: 100%;
margin-bottom: -1px;
}
header li {
font-size: 1.5rem;
height: 4.5rem;
padding-left: .4rem;
}
header li:first-child {
padding-left: 1.5rem;
}
header li:last-child {
padding-right: .5rem;
}
header li > a {
text-decoration: none;
display: block;
padding: 1rem 1rem 1rem 3rem; /*changed the padding*/
margin-left:-2rem; /*create the overlap*/
height: 100%;
color: #fff;
outline: none;
transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
position: relative;
border-radius: 9px 5px 0 0;
overflow:hidden; /*hide the overflow*/
/*increase the z-index*/
position:relative;
z-index:2;
}
/* from here */
header li > a:hover { /* The rectangular part on the right side */
transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
/*remove border and background from here*/
}
header li > a:hover::before { /* Part of oblique cut on the left side */
background-color: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}
header li > a::before { /* Part of oblique cut on the left side */
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right:0; /*make right:0*/
transition: background-color 0.3s ease-in;
transform: skew(-15deg);
transform-origin:bottom right; /*change the origin*/
border-radius: 5px 0 0 0;
}
.current a {
pointer-events: none;
margin-bottom: -3px;
border-right: 1px solid #fff;
}
.current a::before {
border: 1px solid #fff;
background-color: #9bacbb;
}
.content {
display: flex;
margin: 0 1rem 1rem 1rem;
width: 100vw;
height: 61.9rem;
position: relative;
background: #9bacbb;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.5);
}
<header>
<nav>
<ul>
<li class="111">
<a href="#">
111
</a>
</li>
<li class="222">
<a href="#">
222
</a>
</li>
<li class="333">
<a href="#">
333
</a>
</li>
<li class="444">
<a href="#">
444
</a>
</li>
<li class="current">
<a href="#">
555
</a>
</li>
</ul>
</nav>
</header>
<div class="content"> <!-- add -->
Hello world
</div>