Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2015, 11:11
Профессор
Отправить личное сообщение для imedia Посмотреть профиль Найти все сообщения от imedia
 
Регистрация: 20.05.2014
Сообщений: 292

Как добавить стрелку к первому элементу списка на css
Есть вот такой список
<ul>
<li>
<li>
</ul

Как к первому элементу списка добавить треугольник на чистом css
.admin_vertical_menu_prop li:first-child{

}

Вот такой треугольник
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
Ответить с цитированием
  #2 (permalink)  
Старый 13.10.2015, 11:25
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

imedia,
Прописать .admin_vertical_menu_prop li:first-child position:relative;
А .admin_vertical_menu_prop li:first-child:before position:absolute; и правила для треугольника, ну и отпозиционировать этот треугольник с помощью top, left, right и bottom.
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2015, 11:37
Профессор
Отправить личное сообщение для imedia Посмотреть профиль Найти все сообщения от imedia
 
Регистрация: 20.05.2014
Сообщений: 292

можешь код написать чтобы я правильно понял тебя? спс
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2015, 11:51
Профессор
Отправить личное сообщение для imedia Посмотреть профиль Найти все сообщения от imedia
 
Регистрация: 20.05.2014
Сообщений: 292

Ну вот реализация, у меня не получилось
.admin_vertical_menu_prop li ul li:first-child{
position:relative;
margin-top:0px;
}
.admin_vertical_menu_prop li ul li:first-child:before{
position:absolute;
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid #fff;
}

Тут две вложенности это правильно
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2015, 11:59
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

<style>
            .menu-top{
                width: 100px;
                list-style: none;
            }
            .menu-top:first-child{
                position: relative;
            }
            .menu-top:first-child:before{
                content: "";
                width:0;
                height:0;
                border-top:20px solid transparent;
                border-bottom:20px solid transparent;
                border-left:20px solid green;
                position: absolute;
                left: 100%;
            }
</style>

<ul class="menu-top">
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

Перепиши свой код по этому примеру.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить на чужой сайт свой js-код или css стили? Hurray Общие вопросы Javascript 1 08.06.2015 00:00
как добавить еще один селектор foxfor jQuery 1 29.05.2015 12:32
AddClass к каждому первому элементу myocean jQuery 7 03.02.2013 14:44
Как сохранить css всей страницы? KupueIIIKo Events/DOM/Window 1 20.01.2012 10:39
Добавить значения из одного списка в другой XAOC Events/DOM/Window 10 28.08.2008 13:18