您可以以一种简单得多的方式来执行此操作，仅使用一个元素和一个旋转的伪元素（任何支持CSS渐变的浏览器也支持CSS变换和伪元素和成角度的线性渐变。
在Windows上使用当前版本的Chrome，Opera，Firefox，IE。
只是<div class='rectangle'></div>
相关 ：
.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: '';
}
602392714
清零编程群