Question

我知道如何使用伪类在div外部创建箭头，但我需要在div中创建一个箭头，如下所示

enter image description here

我怎么能得到这个？

Answer 1

看看我认为： http://css-tricks.com/examples/ShapesOfCSS/

Answer 2

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

background-color: gray;
background-image: 
   linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
   linear-gradient(45deg, transparent 75%, #000 75%)   /*left side of triangle*/;
background-position: 30px 0, 0 0;
background-repeat: no-repeat;
background-size: 30px 30px;

演示（使用供应商前缀：http://jsfiddle.net/rLZkf/1/）。

这种三角技术的说明

如下图^source所示，CSS使用简单的语法支持线性颜色渐变。

通过一些想象，您可以在上一张图片中看到一个三角形。然而，颜色在对角线上混合。因此，我们设置了明确的色停位置。当这些位置相等时，不再有视觉混合，你会得到一个实心的三角形。

是时候介绍一个三角形了：

background-image: linear-gradient(45deg, transparent 50%, black 50%);

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

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

/* Create triangles */
background-image: 
   linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
   linear-gradient(45deg, transparent 75%, #000 75%)   /*left side of triangle*/;
/* Move one of the triangles to the right */
background-position: 30px 0, 0 0;
/* Don't repeat the background image (remove this to see what would happen) */
background-repeat: no-repeat;
/* Define the size of the triangle */
background-size: 30px 30px;

在之前的CSS代码中，我们可以看到我使用75%作为颜色停止位置（而不是50%）。此选择无关紧要，三角形的最终形状由渐变色停位置background-position和background-size的值决定。

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

相关文件

Answer 3

..........................

现在习惯

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 */
}

的 live demo 的

Answer 4

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

css：

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

演示：
http://jsfiddle.net/7bP9q/

在css3中创建一个箭头

4 个答案:

这种三角技术的说明

相关文件