css技巧汇总--持续更新

灰度蒙层

filter: grayscale(100%)

clip-path

clip-path: polygon(70% 0,100% 0,100% 100%, 66% 100%);  //由第一点无限画下去

chrome隐藏滚动条

::-webkit-scrollbar {
      display: none;
    }

使用clip-path画聊天窗口小三角形

&::before {
        content: "";
        position: absolute;
        top: 10rpx;
        left: -35rpx;
        width: 40rpx;
        height: 30rpx;
        clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
        background-color: #fff;
        z-index: 1;
      }

div 横向滚动

外层使用：white-space: nowrap;
元素使用：display:inline-block;

超出一行省略号

.one-line-ellipsis {
    word-wrap: break-word;
    font-size: 28rpx;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}