html – 如何使用CSS创建三角形背景

发布时间：2020-12-14 23:22:42 所属栏目：资源来源：网络整理

导读：我有以下html块 div class=""header i class="icon-star"/i h1some 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-c

我有以下html块

<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.我完全没有这样做.有人可以帮帮我吗？

解决方法

你在你的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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!