clip-path实现一个div左下角和右下角都出现小尖角

2024-02-01 62 阅读1分钟

效果图：

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="symbol"></div>
</body>

<style>
    .symbol {
        width: 500px;
        height: 20px;
        background-color: skyblue;
        clip-path: polygon(100% 0,100% 100%,calc(100% - 6px) 64%,6px 64%,0 100%,0 0);
    }
</style>

</html>