CSS3垂直功能区

Question

我正在寻找功能区的CSS3代码，如下所示，

这应该是这样的，尺寸宽度为30px，高度为44px： 我没有任何代码可以提供样品或某些东西，例如JS小提琴。

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

Answer 2

把它放在DIV中，然后在div中执行此操作：

div
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

或者你可以使用Canvas，然后绘制你想要的，并且不需要那些CSS2技巧来做到这一点。

Answer 3

倾斜底部的垂直横幅

<div class="verticalbanner"></div>

.verticalbanner {
    background: #e22692; //ribbon color
    height: 44px; // ribbon height
    width: 30px; // ribbon width
}
.verticalbanner:after,.verticalbanner:before {
    content: '';
    position: absolute;
    border-top: 20px solid #e22692; // angle degree, reduce to reduce degree of angles
    height: 0; // no height, no content, just border
    width: 0;
    top: 100%;
}
.verticalbanner:after { // right angle
    border-left: 25px solid transparent;
    right:0;
}
.verticalbanner:before { // left angle
    border-right: 25px solid transparent;
    left:0;
}

jsFiddle (link)