标签 html css css-shapes
<分区>
我很纠结!我想将 cursor: pointer 添加到我的 CSS，但问题是它是一个三 Angular 形。如果我使用以下内容:
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
cursor: pointer;
}<div id="triangleholder">
<div id="triangle">
</div>
</div>整个三 Angular 形和它周围的一切都有“光标”的影响，我怎样才能让三 Angular 形只有悬停的影响？
最佳答案
如果我们使用变换和overflow:hidden
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
position: relative;
height: 50px;
overflow: hidden;
}
#triangle:before {
content: '';
position: absolute;
width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
height: 71px;
background: blue;
transform: rotate(45deg)translateX(29%);
cursor: pointer;
}<div id="triangleholder">
<div id="triangle">
</div>
</div>注意: 代码:translateX(29%)用于将旋转后的蓝色方 block 在旋转后放回容器中心。即使我们改变容器的尺寸(FIDDLE)，这个值似乎也是不变的
关于html - 使用CSS使只有三 Angular 形具有悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29758522/