小编典典
您可以以一种简单得多的方式来执行此操作，仅使用一个元素和一个旋转的伪元素(任何支持CSS渐变的浏览器也支持CSS变换和伪元素和成角度的线性渐变。
在Windows上使用当前版本的Chrome，Opera，Firefox，IE。
HTML 只是
相关 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 /* 80px/2 */; height: 47px/* 80px/sqrt(3) */;
transform: rotate(30deg) skewY(30deg); /* create a rhombus */
/* 49.1deg = atan(1.15) = atan(47px/40px) */
background:
linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);
content: ''
}
2020-05-16