如何创建CSS带状

http://jsfiddle.net/6HyjZ/如何创建CSS带状

.bookmarkRibbon{ 
    width:0; 
    height:100px; 
    border-right:50px solid blue; 
    border-left:50px solid blue; 
    border-bottom:30px solid transparent; 
} 

<div class="bookmarkRibbon"></div>

我努力使一个版本的形状，其中色带指向右边，而不是向下，我怎么能做到这一点？

来源

2014-06-13 user3531149

为了帮助您直观逻辑一步一步
这样你就可以轻松地将它放在任何一方，你的愿望：

CSS Ribbon Shape - How To Create

.bookmarkRibbon { 
 
    border:  50px solid blue;  /* All borders set */ 
 
    border-left: 0;      /* Remove left border */ 
 
    border-right: 30px solid transparent; /* Right transparent */ 
 
    width:  100px;     /* Increase element Width */ 
 
}

<div class="bookmarkRibbon"></div>

来源

2014-06-13 14:10:40

这不是指向正确的大声笑 –

哈哈！好工作=） –

这不仅是这个问题的最佳答案，这是我在这个论坛上见过的最好的答案 – user3531149

-1

使用rotate CSS变换：

.bookmarkRibbon{ 
     width:0; 
     height:100px; 
     border-right:50px solid blue; 
     border-left:50px solid blue; 
     border-bottom:30px solid transparent; 
    -webkit-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
}

http://jsfiddle.net/6HyjZ/13/

来源

2014-06-13 14:10:23 LcSalazar

为什么downvote？ – LcSalazar

.bookmarkRibbon{ 
    width:100px; 
    height:0; 
    border-bottom:50px solid blue; 
    border-top:50px solid blue; 
    border-right:30px solid transparent; 
}

来源

2014-06-13 14:14:38

如果 '旋转' 的CSS属性，它旋转90度的形状。

.bookmarkRibbon{ 
    width:100px; 
    height:0; 
    border-bottom:50px solid blue; 
    border-top:50px solid blue; 
    border-left:30px solid transparent; 
}

http://jsfiddle.net/6HyjZ/6/

来源

2014-06-13 14:15:19 Math

-1

只需使用以下命令：

transform:rotate(90deg); 
-ms-transform:rotate(90deg); /* IE 9 */ 
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */

修改度需要

来源

2014-06-13 14:15:52 ctrlaltdelete63

不会在IE8中工作:) –

@RokoC.Buljan OP没有说它需要在IE8中工作。 – Vucko

使用transform:rotate：

.bookmarkRibbon{ 
    width:0; 
    height:100px; 
    border-right:50px solid blue; 
    border-left:50px solid blue; 
    border-bottom:30px solid transparent; 
    transform:rotate(7deg); 
    -ms-transform:rotate(7deg); /* IE 9 */ 
    -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */ 
}

来源

2014-06-13 14:16:05 Niezborala

-1

您已经具有该形状，只需使用transform属性更改其角度即可。

这是我已添加到您的代码中的代码。

transform: rotate(270deg);

这里是小提琴，http://jsfiddle.net/6HyjZ/11/现在指向正确的（除非这是正确的右侧）

来源

2014-06-13 14:17:22

他只是*正在努力制作这种形状的版本，其中功能区指向右而不是向下*因此可以在纯CSS2中实现（IE8友好） –

只要将你所拥有的，你是好去jsfiddle：

.bookmarkRibbonRight{ 
    width:100px; 
    height:0px; 
    border-right:30px solid transparent; 
    border-bottom:50px solid blue; 
    border-top:50px solid blue; 
}

来源

2014-06-13 14:27:41

如何创建CSS带状

回答

相关问题