Как сделать структуру параллелограмма с эффектом затенения в CSS - PullRequest
Новая
       27

Как сделать структуру параллелограмма с эффектом затенения в CSS

0 голосов
/ 05 января 2019

Я хочу сделать фигуру с затененным фоновым цветом, например так:

Shape

Может кто-нибудь помочь мне с этим?

Ответы [ 2 ]

0 голосов
/ 05 января 2019

CSS перекос и градиент могут решить эту проблему 

#demo {
  -moz-transform: skew(-22deg, 0deg);
  -webkit-transform: skew(-22deg, 0deg);
  -o-transform: skew(-22deg, 0deg);
  -ms-transform: skew(-22deg, 0deg);
  transform: skew(-22deg, 0deg);
  editor/#a90329+1,
  a90329+47,
  aa3d48+47,
  aa3d48+100 */ background: #a90329;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#aa3d48', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  height: 100px;
}
<div id="demo">Demo</div>
0 голосов
/ 05 января 2019

Вы можете использовать псевдоэлемент, например, ::before или ::after, чтобы создать наклонный слой со свойством transform css и нарисовать фоновое изображение, используя linear-gradient(). 

.shape {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index:0;
  margin: 0 auto;
  color: #fff;
  display: flex;
  height: 80vh;
  width: 80vh;
}

.shape::before {
  background: linear-gradient(to top right, maroon 50%, red 50%);
  transform: skewX(-20deg);
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
<div class="shape">Content Goes Here...</div>

Ссылка:

...