Javascript CSS3垂直带

我正在为下面的功能区寻找CSS3代码，请

这是它应该看起来的样子，尺寸宽度30px，高度44px： 我并没有任何代码可以提供给示例，也并没有什么东西可以使用，比如JS fiddles

我见过这个

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

12月10日星期一下午2:30更新： @Zoltan-Toth-我在评论中加入了一把JS小提琴，如下所示。

---

（我不允许在这里发布JS FIFFLE）。

将其放在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技巧即可。将其放入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 */
}

---

或者，您可以使用画布进行绘制，但不需要CSS2技巧即可。您可以尝试以下方法-

HTML

---

你可以试试这样的东西-

HTML

---

斜底竖旗

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

垂直旗{
背景：#e22692；//色带颜色
高度：44px；//功能区高度
宽度：30px；//色带宽度
}
.verticalbanner:之后，.verticalbanner:之前{
内容：''；
位置：绝对位置；
边框顶部：20px实心#e22692；//角度度，减少以减少角度度
高度：0；//没有高度，没有内容，只有边框
宽度：0；
最高：100%；
}
.verticalbanner:在{//直角之后
左边框：25px实心透明；
右：0；
}
.verticalbanner:在{//左角度之前
右边框：25px实心透明；
左：0；
}

---

底部倾斜的垂直横幅

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

垂直旗{
背景：#e22692；//色带颜色
高度：44px；//功能区高度
宽度：30px；//色带宽度
}
.verticalbanner:之后，.verticalbanner:之前{
内容：''；
位置：绝对位置；
边框顶部：20px实心#e22692；//角度度，减少以减少角度度
高度：0；//没有高度，没有内容，只有边框
宽度：0；
最高：100%；
}
.verticalbanner:在{//直角之后
左边框：25px实心透明；
右：0；
}
.verticalbanner:在{//左角度之前
右边框：25px实心透明；
左：0；
}

---

如果不包含内容，也很容易做到。就这些吗？没想到这会这么容易。@icktoofay-我如何精确设置44像素的高度，没有：after。我想在其中添加一个小的“I”图标，这是否可能，并在hover/onTouch上更改颜色？这太棒了，可以接受答案了。我注意到这并没有给“I”留下足够的空间，因为我希望在它里面包括一个图标标志，但如果我调整整体高度44px，“I”几乎不适合，并且“I”被推到顶部（更像是挤在顶部），因为没有多少空间呼吸。如果它不包含内容，也很容易做到。就这样吗？没想到这会这么容易。@icktoofay-我如何精确设置44像素的高度，没有：after。我想在其中添加一个小的“I”图标，这是否可能，并在hover/onTouch上更改颜色？这太棒了，可以接受答案了。我注意到这并没有给“I”留下足够的空间，因为我希望在它里面包括一个图标图标，但是如果我调整整体高度44px，“I”几乎不适合，并且“I”被推到顶部（更像是挤在顶部），因为没有多少空间呼吸。我想在里面添加一个小的“I”图标，这是可能的，并改变颜色的悬停/onTouch？我想添加一个小的“I”图标内，这是可能的，并改变颜色的悬停/onTouch？