CSS3でこの境界線を作る方法は？

Question

CSS3/HTML5でこれをどうやって作るのですか？

赤い背景はdivの背景です。内側の白はテキストを含む別のdivです。

Answer 1

、あなたはこのように、コーナー用の擬似要素の2ペアを使用することができます。

.outer { 
 
    width: 120px; 
 
    background: #a08; 
 
    position: relative; 
 
    padding: 30px; 
 
} 
 

 
.inner { 
 
    height: 118px; 
 
    background: #fff; 
 
    border: 1px dashed #a08; 
 
    flex: 1; 
 
} 
 

 
.outer::before, .outer::after, .inner::before, .inner::after { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: #a08; 
 
    background-clip: padding-box; 
 
    border: 1px dashed #a08; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
.outer::before { 
 
    top: 20px; 
 
    left: 20px; 
 
} 
 
.outer::after { 
 
    top: 20px; 
 
    right: 20px; 
 
} 
 
.inner::before { 
 
    bottom: 20px; 
 
    left: 20px; 
 
} 
 
.inner::after { 
 
    bottom: 20px; 
 
    right: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

丸みを帯びた角ではなく、一緒に行くために国境を解決

Answer 2

同様の質問が役立つはず回答数とhereを尋ねあります。すでに2個のコンテナを持っているので