wake-up-neo.com

Mitteldreieck am unteren Rand der Div

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:

http://jsfiddle.net/SxKr5/1/

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;
}
csshtml5css3css-shapes
46
Miura-shi

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;
}
102
Ben Jackson

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:

 Image with left: 50% property only

Bei der Kombination von left: 50% mit transform: translate(-50%) haben wir Folgendes:

 Image with transform: translate(-50%) as well 

.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>

14
Mohammad Usman

Überprüfen Sie dies:

http://jsfiddle.net/SxKr5/3/

.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')
}
6
Hasan Alaca

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;
}
0
Josh Jennings