CSS3垂直功能区

Question

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

这应该是这样的,大小宽度为30px,高度为44px:我没有任何代码可以提供样品或者像JS小提琴那样起作用.

对齐顶部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;
}?