我试图用渐变背景在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度并在角落之间应用渐变.
<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: '';
}
