CSS折りたたみコーナーがパネル全体を引き継ぎます

Question

折りたたまれたコーナーを私のパネルの全面に広げようとするのはかなり困難です。

私はそれは、モバイル、タブレット、デスクトップ上に表示されるでしょうとして、どんなパネルのサイズ（、私はそれが表面全体をカバーしたいように折り畳まコーナーのための特定のサイズを設定する必要はありません。

私はこれを達成するために簡単な解決策を見つけ出すことはできません。ここ

は私のコードです：。

.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 -->

これに関するお手伝いをさせていただきます。

Answer 1

代わりにあなたのCSSとしてこれを試してみてください。

.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; 
} 

2つのことを行いました。 .amg-corner-button_wrap:hoverと.amg-corner-button_wrap:hover divの幅と高さを100％に更新しました。このようにして、パネルはパネルの100％を占めることになります。

2番目の変更を加えるました：

.amg-corner-button:hover::before { 
    border-width: 0; 
} 

をこれがなければ、我々はパネル内の余分な三角形が残されることになります。右下に緑色のポケット形状を作るには、この三角形が必要です。