在css3中创建一个箭头

Question

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

我怎么能得到这个？

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/).

这种三角技术的解释

如下面的图像中看到的^源,CSS支持使用一个简单的语法线性颜色梯度.

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

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

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

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

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

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

**注意:我在解释中省略了供应商前缀.要使用此技术,您必须添加供应商前缀(如演示中所示).

相关文件

• 多个CSS背景
• linear-gradient
• background-position
• background-size
• background-repeat