css 剪切属性clip-path

慈云数据 2024-06-15 技术支持 51 0

实现效果如下：

在这里插入图片描述


  
    
      .ClIPped {
        width: 200px;
        height: 200px;
        background-color: #3498db;
      clip-path: polyGon(0% 0%, 100% 0%, 100% 100%, 30% 100%);
      }

效果如下：

在这里插入图片描述

    width: 171px;
    height: 171px;
    background: linear-gradient(90deg, rgba(0, 68, 145, 0.6) 0%) !IMPortant;
    background-color: #3498db;
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 20%);