javascript - CSS3垂直功能区

Question

我正在寻找如下功能区的 CSS3 代码，好吗？

它应该是这样的，宽度为 30 像素，高度为 44 像素: 我没有任何代码可以提供示例或可以从 JS fiddle 等工作的东西。

align top http://www.kerrydeaf.com/pink.png

我看过这个http://css-tricks.com/snippets/css/ribbon/

但它是横向的。我正在寻找像上面那样的垂直。

12 月 10 日星期一下午 2:30 更新: @Zoltan Toth - 我在评论中添加了一个 JS Fiddle，如下所示。 (我不允许在这里发布 JS fiffles)。

Answer 1

您可以尝试这样的操作 - DEMO

HTML

<div> i </div>

CSS

div {
    background: deeppink;
    height: 30px;
    width: 30px;
    position: relative;
    text-align: center;
    font: 600 16px sans-serif;
    color: white;
    line-height: 27px;
    border: 0;
}

div:after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 0;
    height: 0;
    width: 0;
    border: solid 15px deeppink;
    border-bottom-color: transparent;
}

div:hover {
    background: purple;
}

div:hover:after {
    border-color: purple;
    border-bottom-color: transparent;
}​