CSS folded corner takes over the whole panel - html

Question

I am having quite a hard time trying to get a folded corner spread over the entire surface of my panel.
I don't want to set up a specific size for the folded corner as I want it to cover the entire surface, whatever the size of the panel (as it would show on mobile, tablet or desktop.
I can't figure out an easy solution to achieve this.
Here is my code :
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap:hover {
width: 120px;
height: 120px;
}
.amg-corner-button_wrap:hover div {
width: 120px;
height: 120px;
}
.amg-corner-button {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #46982b;
-webkit-transition: width 300ms, height 300ms;
-moz-transition: width 300ms, height 300ms;
-ms-transition: width 300ms, height 300ms;
-o-transition: width 300ms, height 300ms;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
}
.amg-corner-button:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 0 120px 120px;
border-style: solid;
border-color: #46982b #fff;
}
.amg-corner-button_text {
font-size: 14px;
font-size: 1.4rem;
width: 120px;
position: absolute;
top: 60px;
right: 0;
left: 0;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform-origin: center top center;
-moz-transform-origin: center top center;
-ms-transform-origin: center top center;
-o-transform-origin: center top center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
text-align: center;
color: #ffffff;
}
<div class="panel panel-default1">
<div class="panel-body">
<div class='amg-corner-button_wrap'>
<div class='amg-corner-button'></div>
<span class='amg-corner-button_text'>Text Goes Here</span>
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Any help on this would be very much appreciated.

Answer 1

Try using this as your css instead.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap:hover {
width: 100%;
height: 100%;
}
.amg-corner-button_wrap:hover div {
width: 100%;
height: 100%;
}
.amg-corner-button {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #46982b;
-webkit-transition: width 300ms, height 300ms;
-moz-transition: width 300ms, height 300ms;
-ms-transition: width 300ms, height 300ms;
-o-transition: width 300ms, height 300ms;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
}
.amg-corner-button:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 0 120px 120px;
border-style: solid;
border-color: #46982b #fff;
}
.amg-corner-button:hover::before {
border-width: 0;
}
.amg-corner-button_text {
font-size: 14px;
font-size: 1.4rem;
width: 120px;
position: absolute;
top: 60px;
right: 0;
left: 0;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform-origin: center top center;
-moz-transform-origin: center top center;
-ms-transform-origin: center top center;
-o-transform-origin: center top center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
text-align: center;
color: #ffffff;
}
We did two things. We updated .amg-corner-button_wrap:hover and .amg-corner-button_wrap:hover div to have a width and height of 100%. This way the panel would take up 100% of the panel.
The second change was adding:
.amg-corner-button:hover::before {
border-width: 0;
}
Without this we would be left with an extra triangle in panel. We need this triangle to create the green pocket shape we have in the bottom-right hand corner.