CSSだけで点線の吹き出しを作る方法

<div class="balloon">
<p>ここにテキストが入ります。</p>
</div>

.balloon {
　position: relative;
　max-width: 400px;
　padding: 20px 8px;
　text-align: center;
　background-color: #fff;
　text-align: center;
　color: #000;
　border: 2px dashed #f00;
　border-radius: 15px;
　margin: 0 auto;
}

.balloon::before {
　content: '';
　position: absolute;
　display: block;
　width: 18px;
　height: 18px;
　left: 0;
　right: 0;
　top: -10px;
　margin: 0 auto;
　border-top: 2px dashed #f00;
　border-right: 2px dashed #f00;
　background-color: #fff;
　transform: rotate(-45deg);
}

note.com

#css