Clip使用

简单使用

img {width: 300px;height: 300px;clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}

图片如下：

img {width: 300px;height: 300px;clip-path: polygon(0% 0%, 100% 100%, 50% 100%)
}

图片如下：

我们给出对应的点，浏览器就能进行剪裁。原点为左上角，x轴横着向右、y轴竖着向下

该网站可以非常方便的得到你想要的形状

案例一

    <div class="loader"><span class="top-half">Loading</span><span class="bottom-half">Loading</span></div>

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;
}.loader {width: 300px;height: 60px;border: 7px solid #0a3d62;border-radius: 10px;text-align: center;line-height: 60px;position: relative;overflow: hidden;
}span {position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-transform: uppercase;font-weight: 600;font-size: 48px;
}.top-half {color: #ee5253;clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);animation: split 2s linear infinite;
}.bottom-half {color: #0a3d62;clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);animation: split 2s linear infinite reverse;
}@keyframes split {0% {transform: translateX(100%);}40% {transform: translateX(0%);}60% {transform: translateX(0%);}100% {transform: translateX(-100%);}
}

案例二

    <div class="wave"><h2>wave</h2><h2>wave</h2></div>

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #2f2f2f;
}.wave {width: 500px;height: 500px;position: relative;
}h2 {position: absolute;text-align: center;line-height: 500px;text-transform: uppercase;font-size: 170px;
}h2:nth-child(1) {color: #7efff5;
}h2:nth-child(2) {color: #03a9f4;clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);animation: wave 2s ease infinite;
}@keyframes wave {0% {clip-path: polygon(0 48%,18% 52%,35% 58%,56% 59%,79% 60%,100% 55%,100% 100%,0 100%);}50% {clip-path: polygon(0 55%,15% 62%,40% 60%,61% 58%,79% 53%,100% 45%,100% 100%,0 100%);}100% {clip-path: polygon(0 48%,18% 52%,35% 58%,56% 59%,79% 60%,100% 55%,100% 100%,0 100%);}
}

案例三

    <div class="container"><div class="clip clip1"></div><div class="clip clip2"></div><div class="clip clip3"></div></div>

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #2f2f2f;
}.container {position: relative;width: 800px;height: 500px;background-color: #222;
}.clip {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: all 0.5s;box-sizing: border-box;
}.clip1 {background: url(./img/1.jpg);background-size: cover;background-position: center;clip-path: polygon(0 0, 21% 0, 45% 100%, 0 100%);transform: translateX(-2px);
}.clip2 {background: url(./img/2.jpg);background-size: cover;background-position: center;clip-path: polygon(16% 0, 85% 0, 70% 100%, 33% 100%);
}.clip3 {background: url(./img/3.jpg);background-size: cover;background-position: center;clip-path: polygon(83% 0, 100% 0, 100% 100%, 63% 100%);
}.container:hover .clip {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}.container .clip:hover {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

案例四

    <div class="card"><h1>information</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariaturmolestiae incidunt consectetur non quas. Eum laudantium deleniti quisquos consequatur ipsam fugit nisi? Ea ratione, facere rem dolore minusquod.</p></div>

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;
}.card {width: 500px;height: 250px;background-color: #c7ecee;padding: 20px 80px 20px 20px;border-radius: 10px;clip-path: circle(7% at 93% 20%);transition: all 0.5s;
}h1 {margin-bottom: 20px;
}p {font-size: 18px;
}.card:hover {clip-path: circle(70.7% at 50% 50%);
}

案例五

    <div class="main"><h1>black</h1><h1>white</h1></div>

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #c8d6e5;
}.main {position: relative;width: 800px;
}h1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin: 0;padding: 0;width: 100%;text-align: center;font-size: 220px;text-transform: uppercase;transition: all 0.5s;
}h1:nth-child(2) {color: white;clip-path: polygon(0 0, 100% 0%, 100% 0, 0% 100%);background-color: #c8d6e5;
}h1:nth-child(2):hover {clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}h1:nth-child(1):hover ~ h1:nth-child(2) {clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
}

案例六

      <div class="content"><h2>title</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similiquedolorum optio nihil soluta dignissimos dicta esse enim rem magnam</p></div>

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #c8d6e5;
}.main {position: relative;width: 800px;
}.card {width: 335px;height: 580px;position: relative;
}.img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: all 0.5s;clip-path: circle(70.7% at 50% 50%);
}img {width: 100%;
}.card:hover .img {clip-path: circle(13.9% at 50% 35%);
}.content {position: absolute;left: 0;bottom: 100px;text-align: center;
}h2 {padding: 0;margin: 0;text-transform: uppercase;
}h2,
p {transform: translateY(20px);transition: 0.3s;opacity: 0;
}.card:hover h2,
.card:hover p {opacity: 1;transform: translateY(0);transition-delay: 0.5s;
}

案例七

 <ul><li><a href="#" data-text="home">home</a></li><li><a href="#" data-text="about">about</a></li><li><a href="#" data-text="services">services</a></li><li><a href="#" data-text="team">team</a></li><li><a href="#" data-text="contact">contact</a></li></ul>

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #c8d6e5;
}ul {margin: 0;padding: 0;
}li {list-style: none;margin: 10px 0px;position: relative;overflow: hidden;
}a {text-decoration: none;display: block;margin: 0;text-align: center;text-transform: uppercase;font-size: 60px;font-weight: 900;position: relative;padding: 5px 10px;color: transparent;
}a:before {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;color: #262626;padding: 5px 0;clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);transition: all 0.5s;transition-delay: 0.25s;
}a:after {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;color: #262626;padding: 5px 0;clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);transition: all 0.5s;transition-delay: 0.25s;
}a:hover:before {color: rgb(160, 0, 0);transform: translate(10px, -3px);
}a:hover:after {color: rgb(160, 0, 0);transform: translate(-10px, 3px);
}li:before {content: "";position: absolute;top: 50%;transform: translateY(-50%);width: 100%;height: 1px;background-color: #262626;transition: all 0.5s;left: -100%;
}li:hover:before {left: 100%;
}

案例八

    <a href=""><span>button</span><span>button</span></a>

@import url("https://fonts.googleapis.com/css?familt=poppins:200,300,400,500,600,700,800,900&display=swap");
* {margin: 0;padding: 0;box-sizing: border-box;font-family: "poppins", sans-serif;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #222;
}a {width: 180px;height: 60px;position: relative;
}a span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;color: white;background-color: #4834d4;text-align: center;line-height: 60px;/* display: flex;justify-content: center;align-items: center; */text-transform: uppercase;letter-spacing: 2px;font-size: 22px;
}span:nth-child(2) {color: #4834d4;background-color: white;clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%, 38% 51%);transition: all 0.5s;
}/* span:nth-child(1) {transition: all 0.5s;
} */span:nth-child(2):hover {clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 53%);
}span:nth-child(1):hover ~ span:nth-child(2) {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 57%);
}

案例九

    <section><div class="box box1"><h2><span>Bye Bye</span><span>2030</span></h2></div><div class="box box2"><h2><span>Happy New Year</span><span>2031</span></h2></div></section>

@import url("https://fonts.googleapis.com/css?familt=poppins:200,300,400,500,600,700,800,900&display=swap");
* {margin: 0;padding: 0;box-sizing: border-box;font-family: "poppins", sans-serif;
}body {overflow: hidden;
}section {width: 100%;height: 100vh;position: relative;
}.box {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}.box2 {background-color: #4cb979;clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);
}h2 {font-size: 45px;display: flex;flex-direction: column;align-items: center;gap: 10px;transform: translateY(-70%);animation: textMove 3s ease-in-out infinite;
}.box2 h2 {color: #fff;
}span:nth-child(2) {line-height: 1em;font-size: 2em;
}@keyframes textMove {0%,45% {transform: translateY(-70%);}55%,90% {transform: translateY(70%);}100% {transform: translateY(-70%);}
}