6

我正在尝试在具有渐变背景的 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 技巧上使用本教程。

4

3 回答 3

17

使用 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: '';
}
于 2013-03-15T17:52:02.560 回答
0

您可以创建 CSS 三角形，但不能创建本身就是渐变的 CSS 三角形。我建议的唯一技巧是选择与渐变背景中的颜色最相似的颜色。这仅取决于您的渐变实际上有多大，以及三角形融合的程度。

对于红色的 div，您可以尝试使用颜色#d94040，但它会缺少边框和阴影。但是，可以添加这些。要为 CSS 三角形添加边框，您可以在您的内部放置一个同样大小的 CSS 三角形。这需要使用绝对定位和 z-index 来重叠它们。

或者您可以使用 ::after 或 ::before 来创建您的 CSS 三角形，而无需添加 HTML 代码，但这仅适用于现代浏览器。

于 2013-03-15T16:18:56.470 回答
0

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

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

对于更受支持的解决方案，我建议您对 :before 女巫伪元素的背景进行“渐变”，您将应用“背景渐变”+（带边框的 css 三角形）技巧。

这是一个 cssTriangle 生成器供您试验。

于 2013-03-15T16:38:45.713 回答