タイトル下のボーダーの両端にダイヤを入れようとした

始まりは、webデザイン担当小川の、この依頼でした。

いや……無理やん？

都合の良いように変更してツッコミが入ったら「最初からそんなんでしたよ？ほら、こっちのillustrator、CS5ですし？CCじゃないですし？データが壊れちゃったんですよ。CCに変えてくれたら大丈夫なんですけどね〜変えてくれたらね〜」と論点のすり替えを行おうかとも思ったのですが。
一応、頑張ってみました。

とは言っても、永遠の初心者コーダーです。
とりあえずダイヤの画像を作って、beforeとafterに入れてみれば何とかなるんじゃないか、と軽い気持ちで試してみたところ……

そりゃこうなりますよね〜。

いっそ画像じゃなくて、疑似要素でダイヤ作っちゃえばいいんじゃないかな。でもそんな知識は……と思った能登でしたが、ふと思い出したのが、いつも利用させていただいている、デザインサンプルでした。
スキルもなければセンスもない私の強い味方です。

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50（NxWorld様　より）

こちらの「マーク #1」を参考に、このようなコードにしてみました。

■HTML

[code]
<h1>タイトル</h1>
[/code]

■CSS

[code]
h1 {
position: relative;
padding: 0 1em;
border-bottom: 1px solid #000;
}
h1::before {
position: absolute;
bottom: -.2em;
left: 0;
z-index: 2;
content: ”;
width: 12px;
height: 12px;
border: 1px solid #000;
background-color: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
h1::after {
position: absolute;
bottom: -.2em;
right: 0;
z-index: 2;
content: ”;
width: 12px;
height: 12px;
border: 1px solid #000;
background-color: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
[/code]

成功しました！
レスポンシブでも問題ないです。
確認した限りだと、横320pxまでは両端にダイヤがありました。

タイトルが長くなり、複数行になっても

大丈夫です。
大丈夫じゃないのは、とうとうカラスまで羨み始めた社長だけです。

いつものように、社長のfacebook記事からでした。

暑くて食欲がなくなりがち……だと思ったら、大好きだけど最近足を運べていないレストランがFacebookページを更新したのを見て、お腹が鳴りました。
仕事中のFacebookは色々と危険ですね。

【ハートブレーン】https://blog.heart-kokoro.net