试图找出如何仅使用CSS3创建L形状按钮。我已经设法通过镜像矩形来创建形状,但我也试图在按钮上实现悬停效果。它仅适用于主矩形。
有关如何解决此问题或可能更有效地执行此问题的任何想法。
这是jsfiddle:
答案 0 :(得分:2)
不确定这是否是您需要的,但我使用边框重新创建它。如果这可以解决您的问题,请告诉我。
<a href="http://www.google.com" class="rectangle rectangle1" target="_blank"></a>
a {
margin:100px;
display:block;
width:50px;
height:50px;
border-bottom: 30px solid black;
border-right: 30px solid black;
}
a:hover {
border-color: #676767;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}