Как добавить границу к фоновой фигуре, как в моем коде? - PullRequest
Новая
       28

Как добавить границу к фоновой фигуре, как в моем коде?

0 голосов
/ 13 января 2020

Недавно у меня были некоторые проблемы с созданием фона, который был адаптивным на всех устройствах.

Кто-то мне очень помог с этим здесь, в Stack Overflow, но мы не смогли создать границу сверху и снизу синих и зеленых фигур.

Возможно ли это сделать с помощью этого кода? Или нам нужно другое решение?

Заранее спасибо.

Редактировать: извините, я не понял своего вопроса. Границы должны быть внизу синей фигуры и сверху зеленой фигуры. 

.box {
  padding:70px 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% 20px;
  background-repeat:no-repeat;
  border-bottom:50px solid green;
  border-top:   50px solid blue;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

Ответы [ 2 ]

3 голосов
/ 13 января 2020

Кажется, это работает и довольно просто, если я правильно понимаю вопрос: 

.box {
  padding:70px 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% 20px;
  background-repeat:no-repeat;
  border-bottom:50px solid green;
  border-top:   50px solid blue;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}

.container {
  background-color: black;
  padding: .5em 0 .5em 0;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}
<div class="container">
  <div class="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

  Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

  Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
  </div>
</div>
0 голосов
/ 13 января 2020

Я бы добавил больше градиента к моему предыдущему решению, как показано ниже: 

.box {
  --b:50px; /* border width*/
  --a:20px; /* to control the angle (use vw unit to keep the same angle on resize)*/
  --t:5px; /* extra border*/

  padding:calc(50px + var(--a)) 50px;
  background:
    /* Top part*/
     /* blue border*/
     linear-gradient(to top    right,transparent 49.5%,blue  50%) top,
     /*Bottom black border*/
     linear-gradient(black,black) top calc(var(--t) - var(--a)) center,
     linear-gradient(to top    right,transparent 49.5%,black 50%) top var(--t) center, 
    
    /*Bottom part*/
    /* Green border*/
     linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
     /* Top black border*/    
     linear-gradient(black,black) bottom calc(var(--t) - var(--a)) center,
     linear-gradient(to bottom right,transparent 49.5%,black 50%) bottom var(--t) center, 
    /*main background*/
    red;
  background-size:100% var(--a);
  background-repeat:no-repeat;
  border-bottom:var(--b) solid green;
  border-top:   var(--b) solid blue;
  clip-path:polygon(0 0,100% var(--a),100% calc(100% - var(--a)),0 100%);
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

<div class="box" style="--a:5vw;--t:10px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

<div class="box" style="--a:80px;--b:10px;--t:2px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

Или другая идея с меньшим количеством кода, где вы можете положиться на косое преобразование, но хотите иметь хороший контроль над углом: 

.box {
  padding:80px 50px;
  margin: 100px auto;
  background:red;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-30px;
  height:60px;
  background:blue;
  border-bottom:5px solid;
  transform:skewY(2deg);
}
.box:after {
  bottom:-30px;
  top:auto;
  background:green;
  border-top:   5px solid;
  border-bottom:none;
  transform:skewY(-2deg);
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>
...