CSS:linear-gradientで横長の六角形とリボン

In: Web Design

横長の六角形(ハニカム?ベベル?)もしくはリボン風のデザインをCSSだけで作りたい場合に、高さが決まっていないパターンが見当たらなかったので、改行が入ってもそこそこ形状を保てる可変タイプをlinear-gradientで作成したのでメモ。

See the Pen Hexagon & Ribbon Btn by Shiho Morisaki (@503design) on CodePen.

marginと疑似要素のwidth、left、rightに同じ値を入力すると端が揃う。
※疑似要素のleftxとrightはマイナス値。

いろいろと調べているうちに、borderでベベルを指定できるborder-corner-shapeという情報を見つけたんですが、CSS4みたい。
https://www.w3.org/Style/CSS/current-work

Star Rating

記事はあなたのお役に立てましたか?
もしよろしければ、星5つ満点で評価してください。
評価数:2 /平均点:5.00

12345

1← ★★★★★ →5

Loading...

Share

Contact me...

ご用件(必須)
会社名/団体名
お名前(必須)
メールアドレス(必須)
お問い合わせ内容

お問い合わせありがとうございます。
読み物に関していただいたご質問へのお返事は、基本的にはお約束しておりません…。ご指摘いただいたものに関しては、再調査等を行って記事との関連性を精査し、記事内にてご報告させていただく場合もございます。