具有悬停效果的响应三角形
Posted
技术标签:
【中文标题】具有悬停效果的响应三角形【英文标题】：Responsive triangles with hover effect 【发布时间】：2015-04-25 16:05:30 【问题描述】：我最近看到一篇文章，详细介绍了如何使用纯 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;
【问题讨论】：
鼠标悬停在上面时你想让它做什么？ 抱歉，我没有指定，忘记包含我失败的代码。如果可能的话，我希望在三角形的外部有一个盒子阴影。 【参考方案1】：您可以通过制作triangles with transform-rotate 来实现悬停效果（背景颜色变化和外框阴影）。
这将允许您仅在形状实际悬停时触发悬停事件：
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>【讨论】：
你是一个美丽的存在。谢谢！【参考方案2】：试试这个就行了
这是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
【讨论】：
以上是关于具有悬停效果的响应三角形的主要内容，如果未能解决你的问题，请参考以下文章