html - 仅 Css 和 Html 标志横幅

Question

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

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

任何帮助将不胜感激，并且可以避免我的头撞到墙上的痛苦。

Answer 1

您唯一需要的是一个<div>元素并操作 CSS。

看看这里和这里，因为他们有你开始需要的一切

我还为您创建了一个 Fiddle，它将为您提供所需的效果。

例子

HTML

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

CSS

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

这是您在图片中显示的带有文字的旗帜。

例子

HTML

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

CSS

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