Html 在css3中创建一个箭头

我知道如何使用psedo类在div外部创建箭头，但我需要在div内部创建箭头，如下所示

---

我怎样才能得到这个呢？

看看那里，我想：

---

现在习惯了

after:  pseudo-class

像这样

.some{
width:100px;
  height:100px;
  background:red;
position:relative;
  overflow:hidden;
}

.some:after{
content:'';
  position:absolute;
  left:10px;
  top:-11px;
z-index:0;
  width:25px;
  height:25px;
  background:green;
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}

---

不需要使用额外的元素，这可以完全使用CSS3完成：

背景颜色：灰色； 背景图像： 线性梯度135度，透明75%，000 75%，/*三角形右侧*/ 线性梯度45度，透明75%，000 75%/*三角形左侧*/； 背景位置：30px0，0； 背景重复：无重复； 背景尺寸：30px 30px； 带有供应商前缀的演示：

对这种三角形技术的解释 如下图所示，CSS使用简单的语法支持线性颜色渐变

想象一下，你可以在前一张图片中看到一个三角形。但颜色在对角线处混合。因此，我们设置显式颜色停止位置。当这些位置相等时，就不再进行视觉混合，得到一个实心三角形

现在是引入三角形的时候了：

背景图像：线性梯度45度，透明50%，黑色50%； 由于角度为45°，渐变从左下角开始，到右上角结束。颜色停止位置定义为50%，因此三角形的左下部分是透明的，另一半是黑色的。要获得不同的三角形，请使用135°的角度。这是一幅具有两个角度的图像：

此时，我们知道如何创建矩形三角形。为了更进一步，我们需要能够创建一个斜边垂直或水平放置的三角形。为此，我们将两个三角形连接起来。CSS3引入了对的支持。此功能用于构造三角形

/*创建三角形*/ 背景图像： 线性梯度135度，透明75%，000 75%，/*三角形右侧*/ 线性梯度45度，透明75%，000 75%/*三角形左侧*/； /*向右移动其中一个三角形*/ 背景位置：30px0，0； /*不要重复背景图像。请删除此图像以查看会发生什么*/ 背景重复：无重复； /*定义三角形的大小*/ 背景尺寸：30px 30px； 在前面的CSS代码中，可以看到我使用75%作为颜色停止位置，而不是50%。这个选择并不重要，三角形的最终形状由渐变的颜色停止位置、背景位置和背景大小的值决定

**注意：我在解释中遗漏了供应商前缀。要使用此技术，必须添加供应商前缀，如中所示

相关文件

---

最短、最兼容浏览器的解决方案：

css:

演示：

---

伪元素，不是伪类=但我的要求在tat链接中没有：看起来是一个非常新鲜的解决方案。请你详细解释一下三角形是如何形成的好吗？@PavloMykhalov为答案添加了解释。@RobW在FF17.0.1中，你的演示被破坏了：三角形没有形成箭头。很酷，但我的div没有固定的宽度和高度，所以不能使用你显示的overflow:hidden。否则这是一个很好的回答

​div{
    position:relative;
    height: 200px;
    width: 200px;
    background-color: gray;
}
div::after{
    content: '';
    border: solid 15px transparent;
    border-top-color:black;
    position:absolute;
    top:0;
    left: 30px;
}