Question

我找到了如何使用CSS创建三角形的各种示例（如this one）;所有这些都是基于创建一个0大小的盒子和摆弄边框来创建三角形形状。好的，非常好。

但是我怎么能在这样的三角形中放置一些东西呢？

Answer 1

您可以使用定位技术将一些内容放在三角形上，而不是在三角形下。

我强调过度和不足因为使用定位将文本定位在三角形上，因此三角形元素不是内容的父级，因此创建三角形我们使用height: 0;和width: 0;所以你需要覆盖文本。

请确保将position: relative;用于保留absolute定位元素的父元素。

没有使用z-index但您可以使用它来使用堆叠顺序安全地玩。

<div class="wrap">
    <div class="triangle"></div>
    <span>Hello</span>
</div>

div.wrap {
    position: relative;
}

div.triangle {
    height: 0;
    width: 0;
    border: 50px solid #f00;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

div span {
    position: absolute;
    left: 35px;
    bottom: 0;
}

Answer 2

这种方式可能很草率，但它适用于基本情况。

http://jsfiddle.net/Yc5nF/1/

<div class="arrow-right">
    <p>Foobar</p>
</div>

.arrow-right {
  position: relative;
  width: 0; 
  height: 0; 
  border-left: 150px solid transparent;  
  border-bottom: 150px solid green;
  border-right: 150px solid transparent;
 }
 .arrow-right p {
   position: absolute;
   top: 70px;
   left: -20px;
 }

如何在三角形盒子里放东西？

2 个答案: