css：制作带边框的气泡框

第一步：制作矩形部分。

html 复制代码

<template>
    <div class="bubble-container">
        产品风险担忧:非常关注投资产品的历史业绩波动性，尤其对去年养老基金的下跌表现出了迟疑和担忧。
    </div>
</template>
<style scoped>
.bubble-container {
    position: relative;
    background-color: #DEF4FF;
    border: 1px solid #B9DAFF;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    margin: 50px;
    /* 为箭头留出空间 */
}


}</style>

第二步，制作当描边的三角形，为了看的更加明显，这个三角形先设置成红色。

在容器里加入一个div，通过border的方式将其设置成一个三角形，通过绝对定位，放置在矩形的左上方。

javascript 复制代码

<template>
    <div class="bubble-container">
        产品风险担忧:非常关注投资产品的历史业绩波动性，尤其对去年养老基金的下跌表现出了迟疑和担忧。
        <div class="stroke"></div>
    </div>
</template>

<style scoped>
.bubble-container {
    position: relative;
    background-color: #DEF4FF;
    border: 1px solid #B9DAFF;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    margin: 50px;
    /* 为箭头留出空间 */
}
.stroke {
  position: absolute;
  top: -10px; /*高度是border宽度的一半*/
  left: 10%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-right: 0px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-bottom: 20px solid #FF0000;
  /* 控制三角形的高度和颜色 */
  transform: rotate(-135deg);
  box-sizing: border-box;
}
</style>

第三步，制作填充三角形，跟上面步骤一样，再加入一个div，生成一个位置和大小的三角形，为了看的更加明显，把这个三角形设置为绿色。

javascript 复制代码

<template>
    <div class="bubble-container">
        产品风险担忧:非常关注投资产品的历史业绩波动性，尤其对去年养老基金的下跌表现出了迟疑和担忧。
        <div class="stroke"></div>
        <div class="fill"></div>
    </div>
</template>


<style scoped>
.bubble-container {
    position: relative;
    background-color: #DEF4FF;
    border: 1px solid #B9DAFF;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    margin: 50px;
    /* 为箭头留出空间 */
}
.stroke {
  position: absolute;
  top: -10px; /*高度是border宽度的一半*/
  left: 10%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-right: 0px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-bottom: 20px solid #FF0000;
  /* 控制三角形的高度和颜色 */
  transform: rotate(-135deg);
  box-sizing: border-box;
}
.fill {
  position: absolute;
  top: -10px;
  left: 10%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-right: 0px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-bottom: 20px solid #00FF00;
  /* 控制三角形的高度和颜色 */
  transform: rotate(-135deg);
  box-sizing: border-box;
}
</style>

绿色三角形把红色三角形完全遮挡住了，在浏览器里修改绿色三角形的top值，变大变小的效果都可以试试，当绿色三角形比红色三角形下移1px时，出现了一个红色三角边框，距离想要的效果很近了。

第四步，把红色三角形（描边三角形）颜色改成跟矩形描边一样颜色，将绿色三角形（填充三角形）颜色改成跟矩形背景色一样，就完成了需要的效果。如果矩形的描边宽度是2px，那么相应的填充三角形要比描边三角形下移2px，以此类推，原理就是两个三角形位置的偏差，形成描边效果。

javascript 复制代码

<template>
    <div class="bubble-container">
        产品风险担忧:非常关注投资产品的历史业绩波动性，尤其对去年养老基金的下跌表现出了迟疑和担忧。
        <div class="stroke"></div>
        <div class="fill"></div>
    </div>
</template>


<style scoped>
.bubble-container {
    position: relative;
    background-color: #DEF4FF;
    border: 1px solid #B9DAFF;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    margin: 50px;
    /* 为箭头留出空间 */
}
.stroke {
  position: absolute;
  top: -10px; /*高度是border宽度的一半*/
  left: 10%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-right: 0px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-bottom: 20px solid #B9DAFF;
  /* 控制三角形的高度和颜色 */
  transform: rotate(-135deg);
  box-sizing: border-box;
}
.fill {
  position: absolute;
  top: -9px; /*位置比stroke下移1px*/
  left: 10%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-right: 0px solid transparent;
  /* 控制三角形的高度和宽度 */
  border-bottom: 20px solid #DEF4FF;
  /* 控制三角形的高度和颜色 */
  transform: rotate(-135deg);
  box-sizing: border-box;
}
</style>