实现思路如下：
用linear-gradient实现戒掉右上角的效果
用::after实现一个小矩形
用linear-gradient截去小矩形的一半
用box-shadow制造阴影效果
用linear-gradient实现截掉右上角的效果background: linear-gradient(225deg, transparent 32px, pink 0 );为啥要用225deg，因为这个渐变是从左下角开始的，如果我们想要在右上角折出一个45度的三角形，那么就需要使用180deg+45deg=225deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<style>
addColor{
width: 300px;
height: 150px;
background: linear-gradient(225deg, transparent 32px, pink 0 );
border-radius: 4px;
}
</style>
<body>
<div id="addColor"> </div>
</body>
</html>
XM返佣http://www.kaifx.cn/broker/xm...
用::after实现一个小矩形 ，重点是如何确定矩形的宽度和高度为45px，这个要根据第一步的transparent 32px，32px（黄色的线长度）和所截取的三角形的角度，这里我们三角形的角度是45度计算所得，橙色正方形的宽 = 根号2 X 32px（根号2约等于1.41），所以最终宽大约等于45px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<style>
addColor{
width: 300px;
height: 150px;
background: linear-gradient(225deg, transparent 32px, pink 0 );
position: relative;
border-radius: 0.5em;
}
addColor::after{
content: "";
position: absolute;
right: 0px;
top:0px;
background: orangered;
width: 45px;
height: 45px;
}
</style>
<body>
<div id="addColor"> </div>
</body>
</html>
用linear-gradient截去小矩形的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<style>
addColor{
width: 300px;
height: 150px;
background: linear-gradient(225deg, transparent 32px, pink 0 );
position: relative;
border-radius: 0.5em;
}
addColor::after{
content: "";
position: absolute;
right: 0px;
top:0px;
background: linear-gradient(225deg, transparent 50%, orangered 0);
width: 45px;
height: 45px;
}
</style>
<body>
<div id="addColor"> </div>
</body>
</html>
用box-shadow制造阴影效果，和把小矩形的颜色橙色改为粉色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<style>
addColor{
width: 300px;
height: 150px;
background: linear-gradient(225deg, transparent 32px, pink 0 );
position: relative;
border-radius: 0.5em;
}
addColor::after{
content: "";
position: absolute;
right: 0px;
top:0px;
background: linear-gradient(-135deg, transparent 50%, pink 0);
width: 45px;
height: 45px;
border-bottom-left-radius: 4px;
box-shadow: -0.2em 0.2em 0.2em #7a3a44;
}
</style>
<body>
<div id="addColor"> </div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。