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

我找到了各种使用CSS创建三角形的例子（比如）；所有这些都是基于创建一个0大小的长方体和摆弄边界来创建三角形形状。好的，非常好

但是，我如何才能在这样的三角形中放置内容呢？

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

我反复强调，因为使用定位是将文本定位在三角形上，所以三角形元素不是内容的父元素，我们使用

height:0创建三角形和
宽度：0因此您需要覆盖文本

只需确保使用
position:relative用于父元素持有
绝对
定位元素

没有使用
z-index
，但您可以使用它来确保堆叠顺序的安全



你好
包装袋{
位置：相对位置；
}
等分三角形{
身高：0；
宽度：0；
边框：50px实心#f00；
边框顶色：透明；
左边框颜色：透明；
右边框颜色：透明；
}
分区跨度{
位置：绝对位置；
左：35px；
底部：0；
}
您可以使用定位技术将一些内容放置在三角形上方，而不是三角形下方

我反复强调，因为使用定位是将文本定位在三角形上，所以三角形元素不是内容的父元素，我们使用
height:0创建三角形和
宽度：0因此您需要覆盖文本

只需确保使用
position:relative用于父元素持有
绝对
定位元素

没有使用
z-index
，但您可以使用它来确保堆叠顺序的安全



你好
包装袋{
位置：相对位置；
}
等分三角形{
身高：0；
宽度：0；
边框：50px实心#f00；
边框顶色：透明；
左边框颜色：透明；
右边框颜色：透明；
}
分区跨度{
位置：绝对位置；
左：35px；
底部：0；
}
这种方法可能有些草率，但它适用于基本情况



福巴

.向右箭头{
位置：相对位置；
宽度：0；
身高：0；
左边框：150px实心透明；
边框底部：150px纯绿；
右边框：150px实心透明；
}
.向右箭头p{
位置：绝对位置；
顶部：70像素；
左：-20px；
}
这种方法可能有些草率，但它适用于基本情况



福巴

.向右箭头{
位置：相对位置；
宽度：0；
身高：0；
左边框：150px实心透明；
边框底部：150px纯绿；
右边框：150px实心透明；
}
.向右箭头p{
位置：绝对位置；
顶部：70像素；
左：-20px；
}
与在div或元素中放置任何内容相同。@otherDewi，这不起作用：长方体的有效大小为0，放大它会破坏三角形形状。与在div或元素中放置任何内容相同。@otherDewi，这不起作用：长方体的有效大小为0，放大它会破坏三角形的形状。我想它应该是这样的。很好，谢谢。我想一定是这样的。很好，谢谢。
<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;
}

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