css三角形里面放文字

今天我们来学习CSS中的一个有趣的技巧，就是如何在CSS三角形中嵌入文字。
首先，我们要了解CSS三角形的基本结构。CSS三角形通常是由一个矩形和一个伪元素组成的。下面是一个例子：

<style>
  .triangle {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .triangle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 0 100px 100px 0;
    border-color: transparent red transparent transparent;
  }
</style>
<div class="triangle"></div> 

我们可以看到，上面的代码定义了一个红色的正方形，并且在它的左上角添加了一个透明的三角形。这个三角形的基本结构是由四条线段构成的，我们通过设置边框的样式、宽度和颜色来制定这些线段的形状。
现在，我们想在这个三角形的中间位置插入文字。为了实现这个目的，我们可以把文字放在三角形的背景里，然后将文字的颜色设为三角形的背景色的相反色。下面是具体的代码：

<style>
  .triangle {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .triangle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 0 100px 100px 0;
    border-color: transparent red transparent transparent;
  }
  .triangle p {
    position: absolute;
    top: 25px;
    left: 25px;
    color: white;
    background-color: red;
    padding: 10px;
    margin: 0;
  }
</style>
<div class="triangle">
  <p>This is a triangle!</p>
</div> 

我们在样式表中添加了一个新的规则，它选择了一个放在三角形中心位置的段落。这个段落的样式设置了文字颜色为白色，背景色为红色，并且添加了一些内边距和外边距。
通过这种方法，我们就可以在CSS三角形中嵌入文字了。这个技巧非常实用，它可以让我们在网站设计中尝试各种有趣的形状和排版方式。