前提
UI做的一个页面的设计图,主体内容背景是一个八边形,加四个不规则顶角边框。
实现思路
宽、高固定,那就简单了,直接让UI给出一个固定宽高的背景.png就好了。
宽、高不固定,可以参考聊天气泡框实现原理,4个顶角是固定的,将中间的纯背景进行拉伸。
UI给我的设计图(关键词:点九图)
4个顶角的尺寸是58px*58px,目前中间的那部分尺寸也是58px,其实中间尺寸>1px就可以了,最好留点安全距离,以便拉伸的时候不会影响到4个角。
我使用css border-image属性完成拉伸效果,实现效果图如下:
局部代码
<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>
参考博客: