clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 75%);
เว็บสร้าง https://www.cssportal.com/css-clip-path-generator/
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.button {
background-color: #1c2236;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: bold;
padding: 12px 24px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(28, 34, 54, 0.6);
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 75%);
}
.button:hover {
background-color: #ffcd02;
color: #1c2236;
box-shadow: 0 10px 20px rgba(28, 34, 54, 0.6);
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 75%);
}
</style>
<body>
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Original clip-path:
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 75%, 0 25%, 90% 0, 100% 10%, 100% 90%, 90% 100%);
Modified clip-path:
clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%, 10% 0);
The original clip-path used a polygon shape to define a complex path that removed parts of the corners to create a sci-fi shaved effect. The modified clip-path also uses a polygon shape, but with some different values for the points.
Let’s break down the polygon points in the modified clip-path:
0 0,
100% 0,
100% 90%,
90% 100%,
10% 100%,
0 90%,
0 10%,
10% 0
อธิบาย
0 0starts at the top left corner of the element100% 0goes straight across to the top right corner of the element100% 90%starts to create the sci-fi shaved corner by pulling in the top right corner, making it more pointed and angled90% 100%continues the sci-fi shaved corner down the right side of the element, making the bottom right corner more pronounced10% 100%creates a slight inward angle to the sci-fi shaved corner to further emphasize the effect0 90%creates a flat top for the element, before creating the sci-fi shaved corner on the left side0 10%starts the sci-fi shaved corner on the left side of the element10% 0finishes the sci-fi shaved corner on the left side and returns to the top left corner of the element
Overall, the modified clip-path creates a more prominent sci-fi shaved corner effect on the top right and bottom right corners, while also removing the top and bottom left corners. This creates a more interesting and dynamic shape for the element.