はい！タイトルそのまんまです！（笑）

正円・長方形・正方形など、左右対称なboxをCSSで描くときは簡単ですが、

変則的な図形を書くときは画像として埋め込むことがほとんどでした。

今回はその手間を省くべく、CSSを使って緩やかなカーブのあるbox（フレーム）を表現していきます。

基本のhtml

 <div class="box">
<p>
ココにテキスト・画像などのコンテンツを入れます！
</p>
</div>

CSSでの設定について

.box {
border: 2px solid #333;
background: #efefef;
padding: 4%;
width: 200px;
margin: 10px;

/* ↓今回のポイント！ */
border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
}

「border-radius」ですが、左から、

【横の値】

➀左上

②右上

③右下

④左下

、

【縦の値】

⑤左上

⑥右上

⑦右下

⑧左下

となります！

borderの太さを変えたりするとまた違った印象のboxになるので、気になる方はぜひ使ってみて下さい！

Request Materials資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

• ● web広告の改善事例が知りたい方
• ● 現在お願いしている代理店との比較をしたい方
• ● サービスの全体像・料金を知りたい方

資料請求

サービス概要・運用方針などを掲載！
アカウント分析の資料サンプルや実際の事例などサービスをご検討の方はぜひご一読ください。

ご相談お問い合わせ

Web広告をご検討中の方はお気軽にご相談ください。
お客さまの目的や広告運用状況に合わせて、最適なWeb広告運用プランをご提案いたします。