Стрелка позиционирования в середине div

Question

Мне нужно поместить стрелку в верхней и средней части и в div. Ширина div изменяется динамически, и когда я использую left:% 50, чтобы расположить стрелу посередине, тогда она добавляет ширину стрелки и из-за этого результат не является удовлетворительным.

DEMO

КОД

#wrapper { 
 
    display: inline-block; 
 
    position: absolute; 
 
    padding: 1px; 
 
    color: #000; 
 
    border: 0px solid #cc3333; 
 
    background-color: grey; 
 
} 
 
#wrapper em.out { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -7px; 
 
    display: block; 
 
    background: transparent; 
 
    border-left: 7px dashed transparent; 
 
    border-right: 7px dashed transparent; 
 
    border-bottom: 7px solid grey; 
 
    overflow: hidden; 
 
} 
 
#wrapper em.inner { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -7px; 
 
    display: block; 
 
    background: transparent; 
 
    border-left: 7px dashed transparent; 
 
    border-right: 7px dashed transparent; 
 
    border-bottom: 7px solid grey; 
 
    overflow: hidden; 
 
}

<div id="wrapper"> 
 
    <em class="out"></em> 
 
    <em class="inner"></em> 
 
    <div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------John------</option> 
 
    </div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------David------</option> 
 
    </div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------Jennifer------</option> 
 
    </div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------Sue------</option> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

Вам нужно только добавить transform: translate(-50%); в #wrapper em.inner & #wrapper em.out класс !! так просто :)

#wrapper { 
 
    display: inline-block; 
 
    position: absolute; 
 
    padding: 1px; 
 
    color: #000; 
 
    border: 0px solid #cc3333; 
 
    background-color: grey; 
 
} 
 
#wrapper em.out { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -7px; 
 
    display: block; 
 
    background: transparent; 
 
    border-left: 7px dashed transparent; 
 
    border-right: 7px dashed transparent; 
 
    border-bottom: 7px solid grey; 
 
    overflow: hidden; 
 
    transform: translate(-50%); 
 
} 
 
#wrapper em.inner { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -7px; 
 
    display: block; 
 
    background: transparent; 
 
    border-left: 7px dashed transparent; 
 
    border-right: 7px dashed transparent; 
 
    border-bottom: 7px solid grey; 
 
    overflow: hidden; 
 
    transform: translate(-50%); 
 
}

<div id="wrapper"> 
 
    <em class="out"></em> 
 
    <em class="inner"></em> 
 
    <div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------John Doe------</option> 
 
    </div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------David------</option> 
 
    </div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------Jennifer------</option> 
 
    </div> 
 
    <div style="margin:1px;background-color:white;"> 
 
     <option>------Sue------</option> 
 
    </div> 
 

 
    </div> 
 
</div>