マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > CSSでカーブのあるフレームを表現!

Mighty Ace Blog

マイティーBlog

デザイン

2021.03.31

CSSでカーブのあるフレームを表現!

 

はい!タイトルそのまんまです!(笑)

 

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

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

 

今回はその手間を省くべく、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になるので、気になる方はぜひ使ってみて下さい!

この記事に関連するタグ

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.