말풍선 css 로만 만들기

결과물

1

.standard {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          color: blue;
          border: 1px solid light-grey;
          border-radius: .4em;
          &:after {
            content: '';
            position: absolute;
            left: 3px;
            top: 50%;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right-color: white;
            border-left: 0;
            margin-top: -8px;
            margin-left: -8px;
          }
          &:before {
            content: '';
            position: absolute;
            left: 1px;
            top: 50%;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right-color: light-grey;
            border-left: 0;
            margin-top: -8px;
            margin-left: -8px;
          }
        }

2

.standard {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          color: blue;
          border: 1px solid light-grey;
          border-radius: .4em;
          &::after {
            border-color: transparent white ;
            border-style: solid;
            border-width: 4px 7px 4px 0px;
            content: '';
            display: block;
            position: absolute;
            left: -6px;
            width: 0;
          }

          &::before {
            border-color: transparent light-grey ;
            border-style: solid;
            border-width: 4px 8px 4px 0px;
            content: '';
            display: block;
            position: absolute;
            left: -8px;
            width: 0;
          }
        }