请问 css 这样的异形布局，大家一般是怎么实现的？

下图是现在做出来的效果。
主要是那 4 个斜边，我知道 border 法可以画出三角形，可是因为斜边是带边框的，目前的方法用的是 border 法画出内外两三角形，内面三角形的颜色是背景色，外面三角形的颜色是边框色，然后让两个三角形平着错开，错开的宽度等于边框的宽度（这里是 2px ）

觉得还是有点麻烦，请问各位大佬有什么更佳的实现吗。

这是 Vue 的代码：

<template lang="html"> <div class="wrap"> <div id="top-1"></div> <div id="left-1"></div> <div id="left-2"></div> <div id="left-3"></div> <div id="left-3-tri-out"></div> <div id="left-3-tri-in"></div> <div id="left-4"></div> <div id="left-5"></div> <div id="left-6"></div> <div id="left-7"></div> <div id="left-7-tri-out"></div> <div id="left-7-tri-in"></div> <div id="right-1"></div> <div id="right-2"></div> <div id="right-3"></div> <div id="right-3-tri-out"></div> <div id="right-3-tri-in"></div> <div id="right-4"></div> <div id="right-5"></div> <div id="right-6"></div> <div id="right-7"></div> <div id="right-7-tri-out"></div> <div id="right-7-tri-in"></div> </div> </template> <script> import base from '../common/js/base'; export default { } </script> <style lang="scss" scoped> @import '~@/common/css/base.scss'; // 使用 vw 转化成和设计稿一样的尺寸 $ui-width: 1920px; @function px2vw($px) { @return $px / $ui-width * 100vw; } $color-border: #2F55A4; * { box-sizing: content-box; } .wrap { background-color: $navMenuBackColor; height:px2vw(1080px); width: px2vw(1920px); } #top-1 { position: absolute; left: px2vw(460px); width: px2vw(1000px); height: px2vw(153px); background: $navMenuBackColor; box-sizing: border-box; border-bottom: px2vw(1px) solid $color-border; } #left-1 { position: absolute; left: px2vw(0px); width: px2vw(459px); height: px2vw(106px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-right: px2vw(1px) solid $color-border; } #left-2 { position: absolute; left: px2vw(0px); top: px2vw(108px); width: px2vw(459px); height: px2vw(43px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-right: px2vw(1px) solid $color-border; } #left-3 { position: absolute; left: px2vw(0px); top: px2vw(153px); width: px2vw(362px); height: px2vw(292px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; } #left-3-tri-out { position: absolute; left: px2vw(362px); top: px2vw(153px); width: px2vw(0px); height: px2vw(0px); border-top: px2vw(294px) solid $color-border; border-right: px2vw(98px) solid transparent; } #left-3-tri-in { position: absolute; left: px2vw(360px); top: px2vw(153px); width: px2vw(0px); height: px2vw(0px); border-top: px2vw(294px) solid $navMenuBackColor; border-right: px2vw(98px) solid transparent; } #left-4 { position: absolute; left: px2vw(0px); top: px2vw(447px); width: px2vw(362px); height: px2vw(43px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-right: px2vw(2px) solid $color-border; } #left-5 { position: absolute; left: px2vw(0px); top: px2vw(492px); width: px2vw(362px); height: px2vw(266px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-right: px2vw(2px) solid $color-border; } #left-6 { position: absolute; left: px2vw(0px); top: px2vw(760px); width: px2vw(362px); height: px2vw(43px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-right: px2vw(2px) solid $color-border; } #left-7 { position: absolute; left: px2vw(0px); top: px2vw(805px); width: px2vw(362px); height: px2vw(275px); background: $navMenuBackColor; } #left-7-tri-out { position: absolute; left: px2vw(362px); top: px2vw(805px); width: px2vw(0px); height: px2vw(0px); border-bottom: px2vw(275px) solid $color-border; border-right: px2vw(98px) solid transparent; } #left-7-tri-in { position: absolute; left: px2vw(360px); top: px2vw(805px); width: px2vw(0px); height: px2vw(0px); border-bottom: px2vw(275px) solid $navMenuBackColor; border-right: px2vw(98px) solid transparent; } #right-1 { position: absolute; right: px2vw(0px); width: px2vw(459px); height: px2vw(106px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-left: px2vw(1px) solid $color-border; } #right-2 { position: absolute; right: px2vw(0px); top: px2vw(108px); width: px2vw(459px); height: px2vw(43px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-left: px2vw(1px) solid $color-border; } #right-3 { position: absolute; right: px2vw(0px); top: px2vw(153px); width: px2vw(362px); height: px2vw(292px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; } #right-3-tri-out { position: absolute; right: px2vw(362px); top: px2vw(153px); width: px2vw(0px); height: px2vw(0px); border-top: px2vw(294px) solid $color-border; border-left: px2vw(98px) solid transparent; } #right-3-tri-in { position: absolute; right: px2vw(360px); top: px2vw(153px); width: px2vw(0px); height: px2vw(0px); border-top: px2vw(294px) solid $navMenuBackColor; border-left: px2vw(98px) solid transparent; } #right-4 { position: absolute; right: px2vw(0px); top: px2vw(447px); width: px2vw(362px); height: px2vw(43px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-left: px2vw(2px) solid $color-border; } #right-5 { position: absolute; right: px2vw(0px); top: px2vw(492px); width: px2vw(362px); height: px2vw(266px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-left: px2vw(2px) solid $color-border; } #right-6 { position: absolute; right: px2vw(0px); top: px2vw(760px); width: px2vw(362px); height: px2vw(43px); background: $navMenuBackColor; border-bottom: px2vw(2px) solid $color-border; border-left: px2vw(2px) solid $color-border; } #right-7 { position: absolute; right: px2vw(0px); top: px2vw(805px); width: px2vw(362px); height: px2vw(275px); background: $navMenuBackColor; } #right-7-tri-out { position: absolute; right: px2vw(362px); top: px2vw(805px); width: px2vw(0px); height: px2vw(0px); border-bottom: px2vw(275px) solid $color-border; border-left: px2vw(98px) solid transparent; } #right-7-tri-in { position: absolute; right: px2vw(360px); top: px2vw(805px); width: px2vw(0px); height: px2vw(0px); border-bottom: px2vw(275px) solid $navMenuBackColor; border-left: px2vw(98px) solid transparent; } </style>