1 /* 正三角 */
2             .triangle {
3               width: 0;
4               height: 0;
5               border-style: solid;
6               border-width: 0 25px 40px 25px;
7               border-color: transparent transparent rgb(245, 129, 127) transparent;
8             }

1 /* 倒三角 */
2             .triangle {
3               width: 0;
4               height: 0;
5               border-style: solid;
6               border-width: 40px 25px 0 25px;
7               border-color:  rgb(245, 129, 127) transparent transparent transparent;
8             }

 1 /*本文超出省略号*/
 2             
 3             /*单行*/
 4             .single-ellipsis{
 5               width: 500px;
 6               overflow: hidden;
 7               text-overflow: ellipsis;
 8               white-space: nowrap;
 9             }
10             
11             /*多行*/
12             .multiline-ellipsis {
13               display: -webkit-box;
14               word-break: break-all;
15               -webkit-box-orient: vertical;
16               -webkit-line-clamp: 4; //需要显示的行数
17               overflow: hidden;
18               text-overflow: ellipsis;
19             }

/*滚动条*/
            .scroll-container {
             height: 250px;
             border: 1px solid #ddd;
             padding: 15px;
             overflow: auto;
             .row {
               margin: 0;
               line-height: 1.5;
             }
            
             &::-webkit-scrollbar {
               width: 8px;
               background: white;
             }
             &::-webkit-scrollbar-corner, /* 滚动条角落 */
             &::-webkit-scrollbar-thumb,
             &::-webkit-scrollbar-track {
               border-radius: 4px;
             }
             &::-webkit-scrollbar-corner,
             &::-webkit-scrollbar-track {
               /* 滚动条轨道 */
               background-color: rgba(180, 160, 120, 0.1);
               box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
             }
             &::-webkit-scrollbar-thumb {
               /* 滚动条手柄 */
               background-color: #00adb5;
             }
            }

 1 /*卡券效果*/
 2             .coupon{
 3               width: 300px;
 4               height: 100px;
 5               position: relative;
 6               background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
 7                 radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
 8                 radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
 9                 radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
10               filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
11             }

 1 /*阴影效果*/
 2             
 3             /* 三角形阴影 */
 4             .shadow-triangle{
 5                 width: 0;
 6                 height: 0;
 7                 border-style: solid;
 8                 border-width: 0 50px 50px 50px;
 9                 border-color: transparent transparent rgb(245, 129, 127) transparent;
10                 filter:drop-shadow(10px 0px 10px  rgba(238, 125, 55,0.5));
11             }
12             
13             /* 缺圆投影 */
14             .circle-square{
15                 width:100px;
16                 height:50px;
17                 line-height: 50px;
18                 background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px);
19                 filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9));
20             }
21             
22             /* 气泡阴影 */
23             .tip {
24                 width: 100px;
25                 height: 30px;
26                 line-height: 30px;
27                 border: 1px solid rgb(245, 129, 127);
28                 border-radius: 4px;
29                 position: relative;
30                 background-color: #fff;
31                 filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9));
32                 &::before {
33                   content: "";
34                   width: 0;
35                   height: 0;
36                   border-style: solid;
37                   border-width: 0 10px 10px 10px;
38                   border-color: transparent transparent #fff transparent;
39                   position: absolute;
40                   top: -10px;
41                   left: 0;
42                   right: 0;
43                   margin: auto;
44                   z-index: 2;
45                 }
46                 &::after {
47                   content: "";
48                   width: 0;
49                   height: 0;
50                   border-style: solid;
51                   border-width: 0 10px 10px 10px;
52                   border-color: transparent transparent rgb(245, 129, 127) transparent;
53                   position: absolute;
54                   top: -11px;
55                   left: 0;
56                   right: 0;
57                   margin: auto;
58                   z-index: 1;
59                 }
60             }