2

一直试图弄清楚如何仅使用 CSS3 创建 L 形按钮。我设法通过镜像一个矩形来创建形状来做到这一点，但我也试图在按钮上实现悬停效果。它仅适用于主矩形。

关于如何解决这个问题或者可能是执行这个问题的更有效方法的任何想法。

这是jsfiddle：

http://jsfiddle.net/kryon17/kpRKA/

4

1 回答 1

3

不确定这是否是您需要的，但我使用边框重新创建了它。让我知道这是否可以解决您的问题。

HTML

<a href="http://www.google.com" class="rectangle rectangle1" target="_blank"></a>​

CSS

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

来源| 演示

于 2012-08-04T03:07:28.083 回答