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

Question

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

Answer 1

编辑：

我能够使用 css 伪元素来实现这一点

来自MDN

CSS 伪元素是添加到选择器的关键字，可让您设置所选元素的特定部分的样式。例如，::first-line 可用于更改段落第一行的字体。

.header {
  position: relative;
}

h1 {
  margin: -130px 0 0 200px;
}

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

i:before {
  font-family: 'FontAwesome';
  content: "\F005";
  font-size: 64px;
  position: absolute;
  top: 100px;
  left: 40px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="" header>
  <i></i>
  <h1>some text goes here</h1>
</div>

jsfiddle