index.vue

<script>
export default{
   name:"p-message",
   props:{
       type:{
           type:String
       },
       message: {
           type:String
       },
       date: {
           type:String
       }
   } 
}
</script>
<template src="./template.html"></template>
<style lang="scss" src="./style.scss" scoped></style>

style.scss

@import "../../assets/scss/_variables";

.message{
  margin-bottom:30px;
  padding:8px 15px;
  border-radius:10px;
  background:$color-main;
  position:relative;
  line-height: 1.3;
  max-width: 80%;
  display:inline-block;
}

.message:before{
  content:"";
  border-style:solid;
  border-width:5px 10px 5px 0px;
  border-color: transparent $color-main transparent transparent;
  position: absolute;
  left:-10px;
  top:0px;
  bottom:0px;
  height:1px;
  margin:auto;
}

template.html

<div>
    <div class="message">
        <div class="text">{{message}}</div>
    </div>
</div>