WEB and GRAPHIC
CREATIBE STUDIO
© COPYRIGHT MGM DESIGN TIPS ALL RIGHTS RESERVED.
最終更新:2022/03/08
下矢印に使えそうなアイコンです。
html
1 |
<div class="bfaf_arrow_down"></div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.bfaf_arrow_down{ display: block; width: 100%; position: relative; text-align: center; } .bfaf_arrow_down::before{ content: " "; display: inline-block; border-top: 30px #000 solid; border-right: 30px transparent solid; border-left: 30px transparent solid; margin-right: auto; margin-left: auto; } |
福家産業様(リブレットハウス)で作成しました。並んだ要素の真ん中に入ることを前提に作成しています。
スマホでは下アイコンになります。
工事期間中
着工からお引き渡し日までの全ての建物が加入しています。
万が一工事中に火災があった場合は、火災発生前の工事状態まで復旧する際に、必要な費用の全額が支払われます。工事中、お客様の建物の火災に対しての不安に、万全の体制を整えております。
完成後
完成後の火災保険は、基本的には任意となっております。
ただし、地震や強風など、昨今の予測不可な自然現象などによる災害の多発から、新しく家を建てるお客様の多くが加盟されます。
そのため、中立の立場としておすすめの火災保険をご案内しております。
火災保険の補償内容や、保証金額など火災保険についてわからないことがございましたら、いつでもお尋ねください。
html
1 2 3 4 5 6 7 8 9 10 11 |
<div class="center_arrow"> <div class="ca_item"> <p class="pri_tit">工事期間中</p> <p>着工からお引き渡し日までの全ての建物が加入しています。<br>万が一工事中に火災があった場合は、火災発生前の工事状態まで復旧する際に、必要な費用の全額が支払われます。工事中、お客様の建物の火災に対しての不安に、万全の体制を整えております。</p> </div> <div class="cai_arrow"></div> <div class="ca_item"> <p class="pri_tit">完成後</p> <p>完成後の火災保険は、基本的には任意となっております。<br>ただし、地震や強風など、昨今の予測不可な自然現象などによる災害の多発から、新しく家を建てるお客様の多くが加盟されます。<br>そのため、中立の立場としておすすめの火災保険をご案内しております。<br>火災保険の補償内容や、保証金額など火災保険についてわからないことがございましたら、いつでもお尋ねください。</p> </div> </div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.cai_arrow{ position: relative; padding: 15px; margin-top: 20px; } .cai_arrow::after{ content: " "; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-top: 20px #484343 solid; border-right: 25px transparent solid; border-left: 25px transparent solid; } @media screen and (min-width: 768px){ .center_arrow{ display: flex; justify-content: space-between; } .ca_item{ width: calc(50% - 20px); } .cai_arrow{ padding: 40px; margin-top: 0; } .cai_arrow::after{ top: 50%; transform: translateX(-50%) translateY(-50%); border-top: 20px transparent solid; border-right: none; border-bottom: 20px transparent solid; border-left: 20px #484343 solid; } } |