完全使用 CSS3 绘制具有悬停效果的 L 形按钮答案

【问题标题】：Drawing an L shape button with hover effect purely with CSS3完全使用 CSS3 绘制具有悬停效果的 L 形按钮
【发布时间】：2012-08-02 00:54:33
【问题描述】：

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

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

这是 jsfiddle：

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

【问题讨论】：

我也想过这样做，但我想知道是否可以创建这个形状，因为我已经看到了 CSS 星星。

标签： html css button polygon

【解决方案1】：

不确定这是否是您需要的，但我使用边框重新创建了它。如果这能解决您的问题，请告诉我。

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

Source | Demo

【讨论】：

谢谢，这正是我想要做的。感谢您的帮助。=)
我有一个后续问题，您如何安排它们，以便每个按钮都位于页面中间的方形 div 位置的一角？这是我正在尝试做的图像的链接。
紫色框是 L 形按钮。谢谢
@JBON 嗯...一旦我下班，我很乐意为您提供帮助。可能最好的方法是拥有一个具有 css 属性 position:relative; 的容器 div，然后让每个按钮为 position:absolute;。然后，您将对它们应用 top、right、bottom 和 left 属性。例如左上角是position:absolute; left:0px; top:0px;。回家后我会整理一个例子。
工作无聊了...jsbin.com/esayip/1/edit。它需要调整，但这应该有效。 demo