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

[selfcreditgiving]

下图是现在做出来的效果。
主要是那 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>

[rabbbit]

svg 背景

[TangMonk]

Photoshop 好像可以画好了导出到 svg，不用写代码的。

[Phuasheng]

为啥不用 js ?

[learnshare]

绘图自然不应该是用布局写，SVG 或者 Canvas 绘制吧

[TangMonk]

原来是布局，理解错了

[POPOEVER]

这是做游戏界面？

[kvsico]

ae 几分钟搞定

[shintendo]

@POPOEVER 目测数据大屏 XD

[AlphaTr]

background svg path 来做

[AlphaTr]

大概手写是这样子的，参数随意调整：background: url('data:image/svg+xml;utf8,<svg height="400" viewBox="0 0 200 200" width="400" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke-width="1" stroke="red"><path d="m200,0h-200l0,200h160z"/></g></svg>')

[murmur]

贴图 png 或者 svg 都可以 这么复杂就不要考虑自己画了

[sunjourney]

这和 vue 有什么关系

[TomVista]

https://www.w3cplus.com/css3/css-shapes-breaking-rectangular-design.html
https://juejin.im/entry/578f21ccc4c971005e0d90a6

从收藏夹里扒拉醋来的，你看看，主要是 clip-path masking CSS Shapes ，对浏览器兼容不大友好，有好的方案记得 @我

[fxy739371]

react 几分钟搞定

[lllllliu]

Svg,Canvas,png+1 背景层一个节点就搞定的事情不需要这么麻烦

[TomVista]

@lllllliu 你说的那个方法，三角区域能放东西吗？

[lllllliu]

@TomVista 可以的呀。除了 png 其他两种都是画，可以随便画你想要的。0.0 甚至你的数据大屏都可以用 canvas 来做。如果交互比较弱。这样可以用一些游戏引擎搞得很炫酷～～。

[selfcreditgiving]

@lllllliu 哈哈 还有这种思路。这个页面两边都是 chart 图表，中间是一个大的地图，要求就是越炫酷越好 ：）

[lllllliu]

@selfcreditgiving 我之前用过 cocos create 做过一次。用过 tree+d3 也搞过一次，不过还是喜欢用游戏引擎做这种炫酷的东西。。因为很多效果都是现成的。反正都是 js