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

我试图用渐变背景在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,.25),2px 3px 5px rgba(70,34,inset 1px 2px rgba(255,255,.25);
       -moz-Box-shadow: 0 0 3px rgba(102,.25);
            Box-shadow: 0 0 3px rgba(102,.25);
    background-image: -webkit-linear-gradient(bottom,#eb6767,#d94040 35%,#eb6767);
    background-image:    -moz-linear-gradient(bottom,#eb6767);
    background-image:      -o-linear-gradient(bottom,#eb6767);
    background-image:     -ms-linear-gradient(bottom,#eb6767);
    background-image:         linear-gradient(to top,#eb6767);
}

我正在使用这个tutorial on CSS tricks.

解决方法

使用CSS变换创建具有渐变(或任何其他类型的图像背景)的三角形(或其他形状- pentagons,hexagons,八边形,decagons,dodecagons,tetradecagons,octadecagons等)非常简单.

但在这种情况下,你甚至不需要三角形.您只需要将一个方形伪元素旋转45度并在角落之间应用渐变.

demo

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

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

解决方法

猜你在找的CSS相关文章