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>