ヒーローの下部に三角形や矢印を表示させようとしているのですが、三角形が右側に浮いてしまい、絶対的な中央ではなくなってしまうため、レスポンスが悪く、モバイルではあまりうまく動作しません。
三角形が常にdivの下部の絶対中心に位置するようにするにはどうしたらよいでしょうか。
コード例はこちら
HTMLです:
<div class="hero"></div>
CSSです:
.hero {
position:relative;
background-color:#e15915;
height:320px !important;
width:100% !important;
}
.hero:after,
.hero:after {
z-index: -1;
position: absolute;
top: 98.1%;
left: 70%;
margin-left: -25%;
content: '';
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
leftを
50%に設定し、
margin-leftを
25px`に設定して、幅を考慮することはできませんか:
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
または、可変幅が必要な場合は、
1/ を使用することができます。.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
以下のCSSを使用することで、「position: absolute」のスタイルで要素を中央揃えにすることができます:
.element {
transform: translateX(-50%);
position: absolute;
left: 50%;
}
CSSが「left: 50%」しかない場合、以下のような効果があります:
[[左記画像:50%プロパティのみ]][1][1]です。
left: 50%と
transform: translate(-50%)` を組み合わせると、次のようになります:
[[transform:translate(-50%)もある画像]][2][2]。