html - 如何使用 CSS 创建三 Angular 形背景

Question

我有以下 html block

<div class=""header>
    <i class="icon-star"></i>
    <h1>some text goes here</h1>
</div>

和这些CSS样式

h1 {
    display: inline-block;
}
i {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 200px 0 0 200px;
    border-color: transparent transparent transparent red;

}

而且我正在使用 fontawesome 图标字体。我想要实现的是这个

这是我试过的jsfiddle .我完全没有做到这一点。有人可以帮助我吗？

Answer 1

您已经在 html 中使用了 h1，在 css 中使用了 h2!

这可能有帮助

h1 {
    margin: -130px 0 0 200px;
}
i {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 200px 0 0 200px;
    border-color: transparent transparent transparent red;
}

fiddle