Ich versuche, ein Dreieck/einen Pfeil an der Unterseite meines Helden zu haben, aber es reagiert nicht und funktioniert auf mobilen Geräten nicht sehr gut, da das Dreieck nach rechts schwimmt und nicht mehr absolut zentriert ist.
Wie kann ich das Dreieck immer im absoluten Zentrum am unteren Rand des div halten?
Beispielcode hier:
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;
}
Können Sie nicht einfach left
auf 50%
setzen und dann margin-left
auf -25px
setzen, um die Breite zu berücksichtigen: http://jsfiddle.net/9AbYc/
.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;
}
oder wenn Sie eine variable Breite benötigen, können Sie verwenden: http://jsfiddle.net/9AbYc/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;
}
Sie können folgendes css verwenden, um ein Element mit position: absolute
in der Mitte auszurichten:
.element {
transform: translateX(-50%);
position: absolute;
left: 50%;
}
Wenn CSS nur left: 50%
hat, haben wir folgende Wirkung:
Bei der Kombination von left: 50%
mit transform: translate(-50%)
haben wir Folgendes:
.hero {
background-color: #e15915;
position: relative;
height: 320px;
width: 100%;
}
.hero:after {
border-right: solid 50px transparent;
border-left: solid 50px transparent;
border-top: solid 50px #e15915;
transform: translateX(-50%);
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 50%;
height: 0;
width: 0;
}
<div class="hero">
</div>
Überprüfen Sie dies:
.hero1
{
width: 90%;
height: 200px;
margin: auto;
background-color: #e15915;
}
.hero2
{
width: 0px;
height: 0px;
border-style: solid;
margin: auto;
border-width: 90px 58px 0 58px;
border-color: #e15915 transparent transparent transparent;
line-height: 0px;
_border-color: #e15915 #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}
Sie können auch ein CSS "calc" verwenden, um denselben Effekt zu erzielen, anstatt die Eigenschaften für den negativen Rand oder die Transformation zu verwenden (falls Sie diese Eigenschaften für andere Zwecke verwenden möchten).
.hero:after,
.hero:after {
z-index: -1;
position: absolute;
top: 98.1%;
left: calc(50% - 25px);
content: '';
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}