Removing element from table - css

Question

Can someone help me with fitting triangle with block element? How remove that unnecessary new line above, when designate menu element with a pointer?
Can someone help me with fitting triangle with block element? How remove that unnecessary new line above, when designate menu element with a pointer?
code
https://jsfiddle.net/fxdruwxf/
body{
width: 400px;
margin:0 auto;
}
#navtable{
position: relative;
width: 238px;
height: 900px;
border-radius: 6px;
border: 1px solid grey;
background: white;
}
.elem{
color: dodgerblue;
font-weight: bold;
padding: 10px 0px;
}
.elem:last-child{
line-height: 18px;
font-size: 10px
}
.elem:hover{
background-color: #C20009;
color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.elem:hover .tr {
height:40px;
width:40px;
overflow:hidden;
transform:scale(1,1.2);/* increase visual height */
position: relative;
left: -40px;
bottom: -30px;
}
.tr::before{
float: left;
content:"";
width:70%;
height:70%;
float:right;
background:#C20009;
transform:rotate(-45deg);
box-shadow: 0 0 1px, inset 0 1px 1px , inset 5px -5px 5px rgba(0,0,0,0.3);
transform-origin: top right;
border-radius : 8px 0 0 0 /* and the rounded corner to finish */
}
<div id="navtable">
<br>
<div class="elem"><div class="tr"></div>Polecamy</div>
<div class="elem"><div class="tr"></div>Promocja</div>
<div class="elem"><div class="tr"></div>Nowości</div>
<div class="elem"><div class="tr"></div>Wypróbuj</div>
<br>
<div class="elem"><div class="tr"></div>Wszystkie</div>
</div>

Answer 1

Consider making your tr class absolutely positioned and your containing elem elements relatively positioned :
.elem:hover{
background-color: #C20009;
color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
/* This will cause any child elements to be positioned relative to it */
position: relative;
}
.elem:hover .tr {
height:40px;
width:40px;
overflow:hidden;
transform:scale(1,1.2);/* increase visual height */
/* This will be positioned absolutely to it's container (which is relative) */
position: absolute;
left: -40px;
/* Since this is absolutely positioned, you'll want it to appear at the top */
top: 0px;
}
This should give you roughly the effect that you are looking for as seen in the example below.
Example
body {
width: 400px;
margin: 0 auto;
}
#navtable {
position: relative;
width: 238px;
height: 900px;
border-radius: 6px;
border: 1px solid grey;
background: white;
}
.elem {
color: dodgerblue;
font-weight: bold;
padding: 10px 0px;
}
.elem:last-child {
line-height: 18px;
font-size: 10px
}
.elem:hover {
background-color: #C20009;
color: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
position: relative;
}
.elem:hover .tr {
height: 40px;
width: 40px;
overflow: hidden;
transform: scale(1, 1.2);
/* increase visual height */
position: absolute;
left: -40px;
top: 0px;
}
.tr::before {
float: left;
content: "";
width: 70%;
height: 70%;
float: right;
background: #C20009;
transform: rotate(-45deg);
box-shadow: 0 0 1px, inset 0 1px 1px, inset 5px -5px 5px rgba(0, 0, 0, 0.3);
transform-origin: top right;
border-radius: 8px 0 0 0
/* and the rounded corner to finish */
}
<div id="navtable">
<br>
<div class="elem">
<div class="tr"></div>Polecamy</div>
<div class="elem">
<div class="tr"></div>Promocja</div>
<div class="elem">
<div class="tr"></div>Nowości</div>
<div class="elem">
<div class="tr"></div>Wypróbuj</div>
<br>
<div class="elem">
<div class="tr"></div>Wszystkie</div>
</div>