使用渐变背景在CSS中创建三角形

Question

我正在尝试使用渐变背景在CSS中创建一个三角形，但至今没有成功。是否有方法可以达到以下图片所示的效果？ （附加在“密码错误”的框上的三角形。） Photoshop设计： 这是我目前在HTML和CSS中的设计： 以下是我目前用于三角形的CSS：

.error-triangle {
    wwidth: 0;
    height: 0;
    border-top:    10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:  10px solid blue;
    margin-top: 64px;
    margin-left: 350px;
    position: fixed;
    -webkit-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
       -moz-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
            box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
    background-image: -webkit-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:    -moz-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:      -o-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:     -ms-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:         linear-gradient(to top, #eb6767, #d94040 35%, #eb6767);
}

我正在使用这个CSS技巧文章

来学习。

- Joel Dean

---

仅使用CSS的箭头：http://cssarrowplease.com/ - Luca

Answer 1

创建三角形（或其他形状-五边形，六边形，八边形，十边形，十二边形，十四边形，十八边形等）并使用渐变（或任何其他类型的图像背景）非常容易使用CSS转换。

但在这种情况下，您甚至不需要三角形。您只需要将正方形伪元素旋转45度，并从角落到角落应用渐变。

演示

<div class='warn'></div>

CSS：

.warn {
  position: relative;
  margin: 0 auto;
  border: solid 1px darkred;
  width: 12em; height: 3em;
  border-radius: .2em;
  background: linear-gradient(lightcoral, firebrick);
}
.warn:before {
  position: absolute;
  top: 50%; left: 0;
  margin: -.35em -.45em;
  border-left: inherit; border-bottom: inherit;
  /* pick width & height such that 
     the diagonal of the square is 1em = 1/3 the height of the warn bubble */
  width: .7em; height: .7em;
  border-radius: 0 0 0 .2em;
  transform: rotate(45deg);
  background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%);
  content: '';
}

- Ana

---

这看起来很棒。你能否在代码中添加文字阴影？谢谢。 - Furkan Gözükara

Answer 2

你可以创建一个CSS三角形，但不能创建一个本身就是渐变的CSS三角形。我建议的唯一技巧是选择一个最接近渐变背景中颜色的颜色。这取决于你的渐变实际有多大，以及三角形将如何融入其中。

对于红色div，你可以尝试使用颜色#d94040，但那样它将缺少边框和阴影。然而，这些可以添加。要向CSS三角形添加边框，可以在你的

内放置一个与之大小相同的CSS三角形的元素。这需要使用绝对定位和z-index来重叠它们。

或者你可以使用::after或::before来创建你的CSS三角形，而不需要添加HTML代码，但那只能在现代浏览器中使用。

- Xarcell

---

好的。那么您认为最好是我只使用三角形的图像吗？ - Joel Dean

如果是我，我不会使用渐变。那样会让它看起来不太像按钮，更像一个警告。 - Xarcell

实际上，您可以通过使用变换非常轻松地创建具有渐变背景的三角形。http://codepen.io/thebabydino/pen/cBmxv - Ana

Answer 3

在CSS3中，您可以使用“边框技巧”创建一个三角形。该边框可以着色并具有背景。

现在WebKit（至少在Chrome 12上）支持将渐变作为边框图像。

对于更受支持的解决方案，我建议您使用:before伪元素的背景进行“渐变”，然后应用（带边框的CSS三角形）技巧。 这里有一个CSS三角形生成器供您进行实验。

- Milche Patern