html - 如何使用 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

这个JFiddle可能会让你更接近一点。请注意，这要求您的三角形具有固定高度，因此我可以使用行高：

#text {
float: right;
line-height: 200px;
vertical-align: middle;
margin-right: 150px;
font-weight: bold;
font-size: 20px;

您是否也想使用 CSS 在三角形中创建星形？

Answer 2

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

小提琴

Answer 3

像这样

给line-height或position:absolute;

演示

CSS

h1 {
    display: inline-block;
    position:absolute;
   line-height:150px;

}

Answer 4

编辑：

我能够使用 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

Answer 5

大家觉得这个解决方案怎么样？http://jsfiddle.net/XrAaP/

这是HTML。（正确的 HTML。与将斜体标签用于其他内容不同......）

<header>
    <div class="triangle"></div>
    <div class="foreground">
        <h1>Some text goes here</h1>
        <p>*</p>
    </div>
</header>

这是CSS。

.triangle{
    border-style: solid;
    border-width: 200px 0 0 200px;
    border-color: transparent transparent transparent black;
    display: inline-block;
    vertical-align: top;
}

.foreground{
    display: inline-block;
    vertical-align: top;
}

h1{
    margin-left: -128px;
}

p{
    color: #fff;
    font-size: 8em;
    margin: 0 0 0 -178px;
}