具有懸停效果的響應三角形

我最近遇到一篇文章，詳細說明如何創建響應三角形與純CSS。我希望進一步將其融入當前的設計中。具有懸停效果的響應三角形

我能夠完美地將四個三角形放置在正方形div中（創建摺紙型效果），並且它們是響應式的。

但是，當我嘗試合併懸停效果時，它不會更改三角形的顏色 - 僅限於它周圍的空白區域。另外，當我的方格的寬度改變（與響應性保持一致）時，底部三角形與其他三角形分離 - 因爲我使用了絕對定位和底部：0;將三角形放置在正方形內。

有沒有人知道解決這個問題的方法來達到我在純CSS中的效果？下面是相關代碼：JSFiddle

HTML：

<body> 
<div class="container"> 
    <div class="box"> 
     <div class="triSectionTop"></div> 
     <div class="triSectionRight"></div> 
     <div class="triSectionBottom"></div> 
     <div class="triSectionLeft"></div> 
    </div> 
</div> 
</body>

SCSS：

.container { 
    box-sizing: border-box; 
    height: 400px; 
    width: 400px; 
} 
.box {  
    position: relative; 
    box-sizing: border-box; 
    height: 400px; 
    width: 100%; 
} 
.triSectionTop { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 0; 
    padding-left: 50%; 
    padding-top: 50%; 
    overflow: hidden; 

    &:after { 
     content: ""; 
     display: block; 
     width: 0; 
     height: 0; 
     margin-left: -200px; 
     margin-top: -200px; 
     border-left: 200px solid transparent; 
     border-right: 200px solid transparent; 
     border-top: 200px solid #41a5e8; 
    } 
} 
.triSectionRight { 
    position: absolute; 
    right: 0; 
    width: 50%; 
    height: 0; 
    padding-top: 50%; 
    padding-bottom: 50%; 
    overflow: hidden; 

    &:after { 
     content: ""; 
     display: block; 
     width: 0; 
     height: 0; 
     margin-top: -200px; 

     border-top: 200px solid transparent; 
     border-bottom: 200px solid transparent; 
     border-right: 200px solid #4eb2f5; 
    } 
} 
.triSectionBottom { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 0; 
    padding-left: 50%; 
    padding-bottom: 50%; 
    overflow: hidden; 

    &:after { 
     content: ""; 
     display: block; 
     width: 0; 
     height: 0; 
     margin-left: -200px; 

     border-left: 200px solid transparent; 
     border-right: 200px solid transparent; 
     border-bottom: 200px solid #5abeff; 
    } 
} 
.triSectionLeft { 
    position: absolute; 
    left: 0; 
    width: 0; 
    height: 0; 
    padding-top: 50%; 
    padding-bottom: 50%; 
    padding-left: 50%; 
    overflow: hidden; 

    &:after { 
     content: ""; 
     display: block; 
     width: 0; 
     height: 0; 
     margin-top: -200px; 
     margin-left: -200px; 

     border-top: 200px solid transparent; 
     border-bottom: 200px solid transparent; 
     border-left: 200px solid #67cbff; 
    } 
}

來源

2015-02-24 Sabolis

你要什麼時候徘徊在它做？ – 2015-02-24 05:55:42

對不起，我沒有指定，忘記包含我的失敗代碼。如果可能的話，我想要在三角形的外面附近放一個盒子陰影。 – Sabolis 2015-02-24 06:00:57

可以實現懸停效果通過使triangles with transform-rotate（背景顏色變化和外箱陰影）。

這將允許您通過靶向僅在形狀actualy徘徊懸停事件：

DEMO

.box{ 
 
    width:500px; 
 
    height:500px; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
.box > div{ 
 
    position:absolute; 
 
    bottom:50%; left:50%; 
 
    width:75%; height:75%; 
 
    transform-origin:0 100%; 
 
    z-index:1; 
 
} 
 
.triSectionTop{ 
 
    -webkit-transform:rotate(-45deg); 
 
    -ms-transform:rotate(-45deg); 
 
    transform:rotate(-45deg); 
 
    background:#41A5E8; 
 
} 
 
.triSectionRight{ 
 
    -webkit-transform:rotate(45deg); 
 
    -ms-transform:rotate(45deg); 
 
    transform:rotate(45deg); 
 
    background:#4EB2F5; 
 
} 
 
.triSectionBottom{ 
 
    -webkit-transform:rotate(135deg); 
 
    -ms-transform:rotate(135deg); 
 
    transform:rotate(135deg); 
 
    background:#5ABEFF; 
 
} 
 
.triSectionLeft{ 
 
    -webkit-transform:rotate(225deg); 
 
    -ms-transform:rotate(225deg); 
 
    transform:rotate(225deg); 
 
    background:#67CBFF; 
 
} 
 

 
.box > div:hover{ 
 
    background:teal; 
 
    box-shadow: 0 0 10px 0 #656565; 
 
    z-index:2; 
 
}

<div class="box"> 
 
    <div class="triSectionTop"></div> 
 
    <div class="triSectionRight"></div> 
 
    <div class="triSectionBottom"></div> 
 
    <div class="triSectionLeft"></div> 
 
</div>

來源

2015-02-24 07:50:02

你是一個美麗的人。謝謝！ – Sabolis 2015-02-24 08:37:16

-1

這將工作試試這個

下面是HTML

<div class="arrow-up"></div> 
<div class="arrow-down"></div> 
<div class="arrow-left"></div> 
<div class="arrow-right"></div>

這裏是CSS

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 

    border-bottom: 5px solid black; 
} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 

    border-top: 20px solid #f00; 
} 

.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 

    border-left: 60px solid green; 
} 

.arrow-left { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
}

這裏是source

來源

2015-02-24 05:59:24

這正是我已經在JS小提琴中所擁有的。 – Sabolis 2015-02-24 06:01:46

具有懸停效果的響應三角形

回答

相關問題