三角形箭头的css渐变

三角形箭头的css渐变,第1张

角形箭头的css渐变

您可以以一种简单得多的方式来执行此 *** 作,仅使用一个元素和一个旋转的伪元素(任何支持CSS渐变的浏览器也支持CSS变换和伪元素和成角度的线性渐变。

在Windows上使用当前版本的Chrome,Opera,Firefox,IE。

HTML 只是

<div ></div>

相关 CSS

.rectangle {    float: left;    position: relative;    height: 80px;    width: 240px;    border: solid 1px #ccc;    border-right: none;    background: #eee linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);    cursor: pointer;}.rectangle:after {    position: absolute;    top: 16px; right: -25px;    width: 48px;    height: 47px;    border-left: solid 1px #ccc;    border-top: solid 1px #ccc;    transform: rotate(134deg) skewX(-10deg) skewY(-10deg);    background: #eee linear-gradient(45deg, white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);    content: '';}

编辑2013年1月

4个月后,我有了一个稍微改进的解决方案。这次,将计算值。我第一次使用试错法获得它们。

新演示
.shape {    float: left;    position: relative;    border: 1px solid #ccc;    border-right: none;    width: 240px; height: 80px;    background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);    cursor: pointer;}.shape:after {    position: absolute;    top: 50%; right: 0;    margin: -24px -20px;    border-top: solid 1px #ccc;    border-right: solid 1px #ccc;    width: 40px ; height: 47px;    transform: rotate(30deg) skewY(30deg);         background: linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);    content: ''}<div ></div>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5675839.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-16
下一篇 2022-12-17

发表评论

登录后才能评论

评论列表(0条)

保存