Css和Html只有旗帜横幅

Question

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

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

任何帮助都会受到高度赞赏，并且可以免除我撞击墙壁的痛苦。

Answer 1

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

看看 here 和 here ，因为他们拥有您开始所需的一切

我也为你创造了一个小提琴，它会给你你想要的效果。

<强> EXAMPLE

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

当你在图片中显示时，这里有你的带有文字的旗帜。

<强> EXAMPLE

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