1

Делаю меню. Хотелось бы сделать сдвинутый вправо блок как на картинке блок зелёного цвета, но информации найти не могу. Пример

3
  • какой блок ? на картинке их 2 , конкретней ставте задачу
    – MoJlo4HuK
    11 апр 2017 в 9:01
  • @MoJlo4HuK как блок зелёного цвета. 11 апр 2017 в 9:02
  • right: -10px;position: absolute; -> jsfiddle.net/br3t/q6dwk8db
    – br3t
    11 апр 2017 в 9:07

2 ответа 2

4
margin-right: -//количество пикселей на которое вам нужно вынести(отрицательный margin);

тень можно сделать псевдоклассами :after:before. Еще вариант дать родителю position:relative; , зеленому блоку position:absolute; и с помощью top/left спозиционировать его так как вам нужно

3

Например вот так:

.wrapper{
  padding:20px;
  background:#6e879b;
}
ul{
  position:relative;
  width:100px;
  margin:0 10px 0 0;
  padding:20px 0;
  list-style:none;
  background:#fff;
  border-top-right-radius:10px;
}
li{
  margin:0 -10px 15px 10px;
}
a{
  position:relative;
  display:block;
  padding:10px 20px 10px 10px;
  color:#fff;
  background:#8bc34a;
}
a:after{
  content:'';
  position:absolute;
  top:100%;
  right:0;
  border-top:5px solid #3b5220;
  border-right:10px solid transparent;
}
<div class="wrapper">
  <ul>
    <li><a href="#">пункт</a></li>
    <li><a href="#">пункт</a></li>
    <li><a href="#">пункт</a></li>
  </ul>
</div><!--.wrapper-->

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.