仅Css和Html标志横幅

我有一个网站，需要一些css制作的横幅，我有点麻烦创建它们。我会告诉你我有什么，但他们太尴尬，无法分享

我的目标是尝试只使用html和css来构建这些图像，而不是图像。这就是我试图用其中的文本构建的东西……我想这就是我失败的地方

任何帮助都将不胜感激，并将使我的头免于撞墙的痛苦

---

您唯一需要的是一个元素并操纵CSS

看一看，因为他们有一切，你将需要开始

我还为你制作了一把小提琴，它会给你想要的效果

HTML

这是你的旗帜，里面有文字，你可以在图片上看到

HTML

---

首先：@KatieK谢谢你的链接！我在看，但我的问题是，我需要文本，我似乎不允许。如果由于某种原因不能在这里发布横幅，那么我想发布这些横幅的编辑版本还是有用的。它至少会给出一些横幅应该是什么样子的指示。非常感谢！你为我节省了很多时间！：如果此解决方案不符合您的需要，您需要采用不同的方法来解决此问题。你需要2个div，1个正方形和1个三角形。两者的宽度相同，三角形位于正方形的底部。这将给你与最终结果相同的形状，你也将有更多的选择在你的旗帜内添加文本甚至图像。小提琴链接是死的。

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

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

<div class="ribbon">BANNER</div>

.ribbon {
    text-align:center;
    display:block;
    width:100px;
    height:100px;
    background:#d00202;
}
.ribbon:after {
    content:"";
    display:block;
    position:relative;
    top:80px;
    width:0;
    height:0;
    border-width:30px 50px 50px 50px;
    border-style:solid;
    border-color:#d00202 #d00202 transparent #d00202;
}