html - 不使用图片实现科技风面板

比如要做这样一个面板：

设计界面，大抵是不怎么喜欢用一些图片，若能用一些几何形状实现操作面板，那自然是极好的。

在 HTML/CSS 中，可以通过 clip-path 属性绘制一些奇奇怪怪的形状。

clip-path 实现的几何形状，无法设置 border，不过可以通过 div 嵌套的方式实现

<template>
    <div style="width: 100%; height: 100vh; box-sizing: border-box; background-color: rgb(13, 78, 87)">
        <div style="margin:0 auto; width: 50%;padding: 100px;">
            <div style="background-color: rgb(47, 204, 224); padding: 1px;display: inline-block;">
                <div class="clipped-div-outer">
                    <div class="clipped-div">
                        <div class="padding align-right" style="background-color: rgb(13, 78, 87);color: #FFF">12312</div>
                        <div style="color: #FFF" class="padding">123123</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss">
@use './screen-tech';

.clipped-div{
    width: 200px;
    height: 100px;
    box-sizing: border-box;
    background: rgb(18, 105, 116);
    // 重点是这个
    clip-path: polygon(0% 15%, 15% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
}

.clipped-div-outer {
    width: 200px;
    height: 100px;
    padding: 1px;
    background: rgb(22, 132, 146);
    clip-path: polygon(0% 15%, 15% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
}
</style>