1

Здравствуйте. Каким образом сделать подобную верстку на странице? введите сюда описание изображения

Картинкой с прозрачной частью? но тогда она будет большой, а как же пустое место под ней?

Буду благодарен за информацию, примеры.

2
  • Градиентом можно сделать. Или svg.
    – Qwertiy
    23 авг 2017 в 16:34
  • @Qwertiy можно пример?
    – iKey
    23 авг 2017 в 16:36

4 ответа 4

2

Например, при помощи градиента, быстро и читаемо.

.menu {
    width: 300px;
    height: 106px;
    background: linear-gradient(19deg, transparent 100px, #444 0);
}
<div class="menu"></div>

1

div {
  overflow: hidden; /* clearfix */
  background: linear-gradient(.4636476090008061rad, white 50%, black 50%);
  background: linear-gradient(.4636476090008061rad, white 50%, black calc(50% + 1px));
  color: white;
  font-size: 3em;
  text-indent: 3em;
}

div:before {
  content: "";
  padding-top: 50%;
  float: left;
}
<div>Тут будет меню!</div>

0

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

nav {
    height: 100px;
    position: relative;
    border-bottom: 1px solid #ccc;
}

nav:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: #00A8F3;
    -webkit-clip-path: polygon(100% 100%, 0 0, 100% 0);
    clip-path: polygon(100% 100%, 0 0, 100% 0);
}

ul {
    position: relative;
    z-index: 1;
    display: flex;    
    justify-content: center;
}

li {
    list-style: none;
    margin: 5px;
}
<nav>
    <ul>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
    </ul>
</nav>

2
0

.menu {
  width: calc(100%);
  height: calc(50vh);
  color: hsla(0, 0%, 100%, 1);
  text-align: center;
  font-size: 2rem;
  background-image: linear-gradient(10deg, hsla(0, 0%, 100%, 0)50%, hsla(40, 80%, 15%, 1)52%);
}
<div class="menu">Меню</div>

1
  • Подберите угол смещения в linear-gradient(10deg <---- как вам нужно...
    – Dhunga
    23 авг 2017 в 23:12

Ваш ответ

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

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