带边框的CSS三角形

我制作了一个css三角形，如下所示：

width: 0; 
height: 0; 
border-top: 10px solid transparent;
border-bottom: 10px solid transparent; 
border-right:10px solid blue;

---

如何向三角形添加边框？

最简单的方法是堆叠2个元素（标记+标记或标记+标记：伪元素）宽度相对/绝对位置（使用边框大小），如链接中所述：

但是，如果您想要一个大小相当、包含文本或图像、半透明或带有背景的三角形，可以使用CSS3转换和2个元素：demo

CSS

HTML库：

<div class="triangle"> 
  <p>SOME TEXTE</p> 
  <span class="notext"></span>
</div>

一些文本

要调整三角形的形状或旋转，您可以更改div的边界xx，使用填充顶部（div/span），变换原点和变换：旋转（xxdeg）并最终改变span的宽度。

请参见。

<div class="triangle"> 
  <p>SOME TEXTE</p> 
  <span class="notext"></span>
</div>