Border-image attribute + dot nine map design usage method

premise

The design drawing of a page made by UI, the background of the main content is an octagon, plus four irregular top corner borders.

Implementation ideas

If the width and height are fixed, then it is simple, just let the UI give a background .png with a fixed width and height.

The width and height are not fixed, you can refer to the realization principle of the chat bubble box, the 4 top corners are fixed, and the pure background in the middle is stretched.

The design drawing given to me by the UI (keywords: point nine pictures)

The size of the 4 top corners is 58px*58px, and the size of the middle part is also 58px. In fact, the middle size > 1px is enough. It is better to leave a safe distance so that the stretching will not affect the 4 corners. 

I use the css border-image property to complete the stretching effect, and the effect diagram is as follows:

partial code

<template>
  <div class="content-box"></div>
</template>

<style lang="scss" scoped>
.content-box {
  width: 1024px;
  min-height: 600px;
  border: 58px solid transparent;
  box-sizing: border-box;
  -moz-border-image: url("~@/assets/install/biankuang.png") 58 58 stretch; /* Old Firefox */
  -webkit-border-image: url("~@/assets/install/biankuang.png") 58 58 stretch; /* Safari and Chrome */
  -o-border-image: url("~@/assets/install/biankuang.png") 58 58 stretch; /* Opera */
  border-image: url("~@/assets/install/biankuang.png") 58 58 fill repeat stretch;
}
</style>

Reference blog:

Correct usage of border-image - Bump Lab - CSDN Blog