Пограничная коробка со стрелкой в ​​правом центре

Question

Я хочу закодировать границу, как на картинке.

p{ 
 
    border: 1px solid green; 
 
}

<div class="container"> 
 
    <p>Some texts</p> 
 
</div>

Answer 1

.speechbubble{ 
 
    height:100px; 
 
    width:100px; 
 
    border:1px solid green; 
 
    position:relative; 
 
    background-color:white; 
 
    border-radius:5px; 
 
} 
 

 
.speechbubble:after{ 
 
    height:10px; 
 
    width:10px; 
 
    border: 1px solid green; 
 
    border-left:1px solid white; 
 
    border-bottom:1px solid white; 
 
    position:absolute; 
 
    content:""; 
 
    top:50px; 
 
    right:-6px; 
 
    transform:rotate(45deg); 
 
    background-color:white; 
 
}

<div class="speechbubble"></div>

Вот также working fiddle