Slanted CSS

Различные решения связанные так или иначе со скошенными линиями (при помощью CSS).

2-х цветный backgound

#backgound-slanted {
  height: 30vh;
  margin: 0;
  background: yellow;
  overflow: hidden;
  position: relative;
}

#backgound-slanted:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -250px;
  width: 500px;
  background: #000;
  transform: skew(-30deg);
}

Этого же эффекта можно добиться и градиентом:

#backgound-gradient {
  height: 30vh;
  background: linear-gradient(115deg, black 25%, yellow 25%)
}

Правда в первом случае линия перехода между цветами смотрится плавнее.

Скошенные углы у изображения

.image-slanted {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  clip-path: polygon(0 0%, 100% 0, 100% 96%, 0 100%);
}

Скошенные переходы между горизонтальными областями

Такой эффект нужен при создании лэндингов

<style>
.se-container {
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top: 150px;
}

.se-slope {
    height: 30vh;
    margin: 0 -50px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}

.se-slope:nth-child(odd) {
    background: #000;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    margin-top: -200px;
}

.se-slope:nth-child(even) {
    background: #e90089;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

.se-content {margin: 0 auto;}
</style>

<section class="se-container">
	<div class="se-slope">1</div>
	<div class="se-slope">2</div>
	<div class="se-slope">3</div>
	<div class="se-slope">4</div>
</section>

Более простое решение для скоса «этажей» лэндинга:

/* Перед блоком */
#promo-block:before {
    content: "";
    position: absolute;
    background: #c6ddf5;
    width: 100%;
    height: 50px;
    top: -49px;
    -webkit-clip-path: polygon(0 0, 0 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 100% 100%, 0 100%);
}

/* После блока */
#promo-block:after {
    content: "";
    position: absolute;
    z-index: 9;
    background: #c6ddf5;
    width: 100%;
    height: 50px;
    bottom: -49px;
    -webkit-clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
}

В мобильной версии можно уменьшить градус наклона

@media screen and (max-device-width: 480px) { 
	#promo-block:before {height: 30px; top: -29px;}
	#promo-block:after {height: 30px; bottom: -29px;}
}

@media screen and (max-device-width: 330px) { 
	#promo-block:before {height: 20px; top: -19px;}
	#promo-block:after {height: 20px; bottom: -19px;}
}

Скошенная кнопка

Are you ready?

<style>
.se-btn h3 {
    background: #e90089;
    color: #fff;
    margin-top: 60px;
    position: relative;
    display: inline-block;
    padding: 15px 20px;
    line-height: 40px;
}

.se-btn h3:before {
    border-bottom: 70px solid transparent;
    border-right: 30px solid #e90089;
    left: -30px;
    content: '';
    width: 0px;
    height: 0px;
    top: 0px;
    position: absolute;
}

.se-btn h3:after {
    border-top: 70px solid transparent;
    border-left: 30px solid #e90089;
    right: -30px;
    content: '';
    width: 0px;
    height: 0px;
    top: 0px;
    position: absolute;
}
</style>

<div class="se-btn"><h3>Are you ready?</h3></div>

Метки