2019.06.12

56

CSSで作った三角をposition配置したいのに崩れる!

このエントリーをはてなブックマークに追加

簡単な三角とかフキダシならCSSで作ってしまうのが主流になってる昨今です。

CSSでボタンデザインして右側に三角矢印アイコンを配置したい!

キャプチャ

こんな感じに。

画像で配置するならbackground指定で簡単にできますが、CSSならどうやるの? position使うならわかる!でも真ん中配置は?
レスポンシブだとPCと他で高さが変わるから、デバイスが変わっても真ん中配置したい!! topから%指定でやっていくの?? でもそれってCSSで再度指定しないとずれない?

と、疑問に思うばかり。

けれど、この世は神様で溢れているので【position 中央 指定】で検索すればやり方はいっぱい出てきます。
でも今回は、中央に配置して右側もしくは左側に配置したい! で、自分が少しハマったことを書きたいと思います。
 

三角が崩れるっ!

CSSで三角形を作ります。ここでは、作り方は割愛します。

こんな感じに作っていきます。

 

#box1 a:after {
content: "";

/* 三角形 */
border: 20px solid transparent;
border-left: 20px solid #000;
display: inline-block;

/* 配置 */
position: absolute;
top: 0;
bottom: 0;
right: 10px;
height: 0;  /* ←重要 */
margin: auto;
}


画像やブロックを画面中央配置するだけなら【top,right,bottom,leftを0】【margin:auto】で簡単に配置できるのですが、今回は矢印を【右側に配置】したいので、参考にさせて頂いたページだと作った三角が崩れて表示されます。

 

a

こんな感じに。何故? 書かれたコードにright指定をしてあげただけなのに、何故?
三角形は普通に作れていたのにpositionしてしたら崩れたっ!!!

ならどうすればいいのか。

heightを記述する!

先のコードに【重要】と書かれた部分です。

heightを記述してあげると、元通りの三角形に戻ります。多分自動的に高さを取得しちゃっているのかな…と思います。

なので、高さを0にしてあげます。

ちなみにwidthは書かなくても大丈夫ですが、CSSで作ったアイコンを中央配置にする場合はwidthの設定が同じように必要になります。

この時は、三角形が崩れる! というよりかは、中央配置されませんのであしからず。

このエントリーをはてなブックマークに追加


この記事の投稿者:

次