CSS 制作带边框背景色透明的消息框

<div class="warp" >
    <div class="box" >
        <div class="horn" ></div>
        <div class="content">低调哥挺帅</div>
    </div>
</div>

.warp{
    margin: auto;
    width: 75%;
    height: 100vh;
    z-index: 1;
    position: relative;
}
.box{
    overflow: hidden;
    .horn{
        right: .75rem;
        top: .18rem;
        position: absolute;
        transform: rotate(45deg);
        width: .25rem;
        height: .25rem;
        border-width: 0.02rem 0rem 0rem 0.02rem; 
        border-style: solid;
        border-color:#fff; 
        background: #000;
        background: hsla(0, 0, 0, 0);
    }
    .content{
        display: none;
        position: relative;
        margin: .3rem 0 .25rem 0;
        width: auto;
        float: right;
        padding: .1rem .3rem;
        font-size: .3rem;
        color: #fff;
        background: hsla(0, 0, 0, .0);
        letter-spacing: .05rem;
        border-bottom: .02rem solid #fff;
        border-radius:.35rem;
        &::after{
            content:'';
            position: absolute;
            width: 1.305rem;
            height: 103%;
            top:0;
            left: 0;
            border-width: 0.02rem .0rem .02rem .02rem;
            border-style: solid;
            border-color: #fff;
            border-radius: .35rem .0rem 0 .35rem;
        }
        &::before{
            content:'';
            position: absolute;
            width: .71rem;
            height: 103%;
            top:0;
            right:0;
            border-width: 0.02rem .02rem .02rem .0rem;
            border-style: solid;
            border-color: #fff;
            border-radius: 0 .35rem .35rem 0;
        }
    }