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

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

Answer 2

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

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

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

Answer 3

喜欢这个

提供line-height或position:absolute;

<强> DEMO

<强> CSS

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

}

Answer 4

修改

我能用css Pseudo-elements

实现这一点

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