Кастомные блоки на сайте

#html #css #вёрстка #svg

Как сделать что-то вроде такого? 
Ну или в форме трапеции или в форме сферы ну или в любой другой форме.

Есть ли способ проверить наведение :hover ровно по краям, а не прямоугольником.

Пробовал сделать в svg, но мне кажется есть другие способы о которых я не знаю
    

Ответы

Ответ 1

Пример 1 с боковыми белыми блоками :after и :before:



.intro {
  position: relative;
  min-height: 200px;
  height: 100%;
  width: 100%;
  background: transparent url(https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8)
top center no-repeat;
  background-size: 100%;
  transition: all .27s ease-in-out;
}

.intro:hover {
  -webkit-background-size: 110%;
  background-size: 110%;
}

/* Для верхнего блока */
.intro_t:before, 
.intro_t:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}

/* Для нижнего блока */
.intro_b:before, 
.intro_b:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.intro_t:before {
  left: 0;
  width: 50%;
  right: 50%;
  margin-left: 0px;
  border-bottom: 50px solid #fff;
  border-right: 50px solid transparent;
}
.intro_t:after {
  right: 0;
  width: 50%;
  left: 50%;
  margin-right: 0px;
  border-bottom: 50px solid #fff;
  border-left: 50px solid transparent;
}

.intro_b:before {
  left: 0;
  width: 50%;
  right: 50%;
  margin-left: 0px;
  border-top: 50px solid #fff;
  border-right: 50px solid transparent;
}
.intro_b:after {
  right: 0;
  width: 50%;
  left: 50%;
  margin-right: 0px;
  border-top: 50px solid #fff;
  border-left: 50px solid transparent;
}


/* Доп.стили */
body,
html {
  margin: 0;
  padding: 0;
  background: #fff;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.some__content {
  padding: 2rem;  
}

  

  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, est.
  
  
  






Пример 2 с clip-path:



.intro {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  width: 100%;
  
  min-height: 250px;
  
  background: url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=61282cfeed75871385c84c2a44a8e594)
bottom no-repeat;
  background-size: 100%;
  transition: all .27s ease-in-out;
}

.intro:hover {
  -webkit-background-size: 110%;
  background-size: 110%;
}

.clip-wrap-1 {  
-webkit-clip-path: polygon(0 0, 100% 0, 100% 200px, 60% 200px, 50% 250px, 40% 200px,
0% 200px);
clip-path: polygon(0 0, 100% 0, 100% 20%, 60% 20%, 50% 30%, 40% 20%, 0% 20%); 
}    


.clip-wrap-2 {  
-webkit-clip-path: polygon(0 0, 40% 0%, 50% 50px, 60% 0%, 100% 0%, 100% 200px, 0%
200px);
clip-path: polygon(0 0, 40% 0%, 50% 10%, 60% 0%, 100% 0%, 100% 20%, 0% 20%);
} 


/* Доп.стили */
body,
html {
  margin: 0;
  padding: 0;
  background: #fff;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.some__content {
  padding: 2rem;  
}

      

        

        
      

      

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, est.
      

      

        

        
      
    


Ответ 2

Такие треугольники удобно делать через CSS. 
Вот пример кода с сайта htmlbook.ru для понимания работы с треугольниками в CSS:

.block {
background: green;
border-radius: 10px;
padding: 20px;
position: relative;
color: #fff;
}

.block::after {
content: ''; 
position: absolute; /* Абсолютное позиционирование */
left: 20px; bottom: -20px; /* Положение треугольника */
border: 10px solid transparent; /* Прозрачные границы */
border-top: 10px solid green; /* Добавляем треугольник */
}


Свойствами position (top, bottom, left, right) можно управлять положением кастомного
треугольника.