javascript - CSS3 垂直功能区

Question

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

这就是它应该看起来的样子，大小宽度为 30 像素，高度为 44 像素：我没有任何代码可以提供示例或可以从例如 JS 小提琴中工作的东西。

对齐顶部 http://www.kerrydeaf.com/pink.png

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

但它是水平的。我正在寻找像上面这样的垂直。

更新，12 月 10 日，星期一，下午 2 点： @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（链接）