Как сделать подобную верстку?

255

24 августа 2017, 18:49

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

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

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

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

Answer 2

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

.menu { 
    width: 300px; 
    height: 106px; 
    background: linear-gradient(19deg, transparent 100px, #444 0); 
}

<div class="menu"></div>

Answer 3

* { 
    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>

Answer 4

.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%); 
}