前回の続きです。画像を使わずに、cssで三角形を作る方法の続きです。

この文字が入った矢印をバナーのような四角い入れ物にとしたらどうなるか。

右寄せ、ピッタリにしたいという場合…。

sankaku11

矢印の親のdivにjustify-content: flex-end;をすれば右寄せになりますが、なぜかぴったりとくっつかない!この空間は、、、

そうです、前回の記事でほかのtop, right,bottomに色を塗った箇所!今は透明になっていますが、存在しているのです!

ぬわんと!根本的なHTML実装を変えないといけない羽目に‥‥。(/ω\)イヤン、余白を許してくれ。。

 

三角部分のdivを親のdivから出さないといけない・・・?
親のdivから出したら改行されるように下に表示された。

さらにこれをdivで囲んでFlexboxでdivdiv祭?

sankaku12

今、透明になっている部分topとbottomを同じ色にすれば疑似的に同じ色の長方形に入っているように見える?

いや!違う!ギザギザ部分がはみ出る!w
sankaku13

文字が入った長方形の横に疑似的に入れれば解決しそう。

疑似要素 :after を使えないか。

content には、空の文字。疑似要素の中は.sankakuと同じ内容にしたら

.chouhoukei:after{
content: “”;
border: 5vw solid transparent;
width: 0;
height: 0;
border-left: 8vw solid yellowgreen;
}

sankaku14

三角が変な位置にきた!(´;ω;`)ウゥゥどこまで私を苦しめるの…。うおーん。あともうちょっとなんだけどなぁ。

いや、ちがうよ、
chouhoukei:afterに書くとまた同じようなことになる。

三角は水色の外に出さないといけないわけだから、arrow:after として.sankakuに描いていた内容を引き継ぐ。

そして、border-right: 0; とすることで再現出来ました!

sankaku15

:afterとした部分も.arrowに書いていたbackground-colorを引き継ぐんやね。

てっきり.chouhoukei:afterのあとに三角形を持ってくれば背景の色も伸びるとばっかり思ってた!

あー、難しい!!!

 

最後にソースコードです。

<style>

.arrow{
background-color: aqua;
width: 50%;
display: flex;
/*右寄せ*/
justify-content: flex-end;

}
.arrow:after{
content: “”;

border: 5vw solid transparent;
border-left: 8vw solid yellowgreen;
border-right: 0;

}
.chouhoukei{
width: 15vw;
height: 5vw;
background: yellowgreen;
margin: auto 0;
display: flex;
align-items: center;
justify-content: center;
}

/* いらなくなった */
.sankaku{
border: 5vw solid transparent;
width: 0;
height: 0;
border-left: 8vw solid yellowgreen;
}
p{
font-size: 2vw;
}

</style>

<div class=”arrow”>
<div class=”chouhoukei”>
<p>詳しく見る</p>
</div>
<!–<div class=”sankaku”></div> –>
</div>

 

絵ばっかり描いていないで、コーディングもちゃんとやろうね。