ドットブレイクに改行を追加する

Question

私は会社のプリントブランドに基づいてウェブサイトのデザインに取り組んでいます。私が模倣したいのは、コンテンツを囲むヘッダーのドットボーダーの中断です。 (Here's an example.)ご覧のとおり、ヘッダーテキストは、ドットの境界線に対して垂直に中央揃えされているため、その半分がエッジの上にあり、単語の長さに応じて区切りの長さが異なります（前後の空白の量単語は一貫していなければなりません）。いくつかの例では、写真のように、同じ矩形に複数のヘッダーがあるため、アドレスする必要があるのは上の境界線だけではありません。このデザインの背景は、単色ではなく画像になります。さらに、このサイトは応答性があり、さまざまなモバイル環境で回避策を機能させる必要があり、境界が変わると境界の幅も変化します。

私は主に、フロントエンドのコーディング能力を備えたWebデザイナーですが、それほど高度なものはありません。これが可能かどうか（一般的には私の経験レベル）か、完全に。助言がありますか？

編集：私は写真の背景要素でこれを行うための現実的な方法があることを望んで、私の質問を明確にするために新しい写真を追加しました。ありがとう！

Answer 1

はい、可能です。ヘッダー表示を作成してください：インラインブロック、側面に
を追加し、その親の背景で色付けしてください。その後、
の半分の高さでこのヘッダーを上に上げることができます。例：

1）位置：相対; line-height：1em：top：-.5em;
2）変換：translateY（-50％）;

がここにAckは、私は背景が白ではないことを追加するのを忘れ例https://jsfiddle.net/5w4hanu3/2/

h2 { 
    position: relative; 

    display: inline-block; 
    margin: 0; 
} 

.top h2, 
.bottom h2 { 
    transform: translateY(-50%); 

    padding: 0 20px; 

    background: #fff; 
}