Срезанные углы блока

#html #css #svg

Нужно срезать углы блока так, чтобы фон срезанных частей был прозрачным. Фон будет
изображением, так что треугольники не подойдут. При этом нужно, чтобы у всего блока
со срезанной частью была рамка, и потому тут проблема. 

Я создал срез с помощью clip-path, но рамка блока срезается так же, как и он сам.
В итоге выходит так: 





html,
body,
.bdiv,
.mainblock {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.bdiv {
    display: table;
}
.mainblock {
    display: table-cell;
    vertical-align: middle;
}
.mainblock>div {
    position: relative;
    width: 500px;
    background: #444;
    margin: 0 auto;
}
.content {
    padding: 10px 30px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    color: ddd;
}
.head-text {
    clip-path: polygon(460px 0, 100% 30px, 100% 100%, 0 100%, 0 0);
    font-size: 18px;
    color: #eee;
    border: 5px solid #fff;
    background: #333;
}
.cont-text {
    background: #000;
}
.cont-text>form input {
    padding: 5px;
    width: 40%;
}




	

		

			
Приветствую!
			

				

					
					
				
			
		
	








Можно, конечно, добавить абсолютный блок-линию как рамку поверх среза, но по-моему
так не делается. Но как тогда? Мне нужно 2 таких среза, один как на картинке, а второй
слева внизу.
    

Ответы

Ответ 1

html,
body,
.bdiv,
.mainblock {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.bdiv {
    display: table;
}
.mainblock {
    display: table-cell;
    vertical-align: middle;
}
.mainblock>div {
    position: relative;
    width: 500px;
    /* background: #444; */
    margin: 0 auto;
}
.content {
    padding: 10px 30px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    color: #ddd;
}

.head-text {
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 15px);
    clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 15px);
    font-size: 18px;
    color: #eee;    
    background: url(https://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg)
center no-repeat;
}

.box {
  background: #fff;
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 25px);
    clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 25px);
    padding: 5px;
} 

.cont-text {
    background: #000;
}
.cont-text>form input {
    padding: 5px;
    width: 40%;
}

body {
  background: #444;
}

  
 
    

      
Приветствую!
      

        

          
          
        
    
  



Ответ 2

Такой вот еще вариант svg:



html,
body,
.bdiv,
.mainblock {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.bdiv {
    display: table;
}
.mainblock {
    display: table-cell;
    vertical-align: middle;
}
.mainblock>div {
    position: relative;
    width: 500px;
    background: #444;
    margin: 0 auto;
}
.content {
    padding: 10px 30px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    color: ddd;
}
.head-text {
    font-size: 18px;
    color: #eee;
    padding: 15px 30px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.cont-text {
    background: #000;
}
.cont-text>form input {
    padding: 5px;
    width: 40%;
}


.top {
  position: relative;
  height: 50px;
}

.top-bg {
  max-width: 100%;
  width: 100%;
}



	

		

			

              
              
			  
Приветствую!
			
			

				

					
					
				
			
		
	





Ответ 3

SVG - решение









	
	

 
 







Здесь три кнопки меню выполнены с помощью трех патчей. Эти же патчи входят в маску,
которая служит для того, чтобы стал виден фон.  

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

Попробуйте заменить фон на другую картинку. На кнопки я сделал ховер, в принципе
нетрудно добавить к ним ссылки. Все элементы в одном блоке SVG. Его лучше добавить
в Html страничку инлайн.

Update 23.08.2017

Доработка примера по замечаниям в комментариях автора вопроса 


  При наведении на текст ссылка теряет фон до тех пор пока курсор не
  выйдет за пределы блока и обратно. И я все так и не понял как сделать
  анимированный фон определенному блоку SVG


Данный эффект происходил из-за того, что текст в блоках не входил в
    группу, для которой был применен селектор :hover.  Решил эту
    проблему объединением блока и текста в одну группу.   


                 
                   Привет  
 


Добавлена анимация фона и текста при помощи изменения прозрачности   

#p1:hover, #p2:hover, #p3:hover{
   fill:dodgerblue;
   color:white;
   opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.8s ease-in-out;

   }
   #p1, #p2, #p3
   {
    opacity:0.5;
   -webkit-transition: opacity 0.5s;
       transition: opacity 0.8s ease-in-out;
   }    


Ниже, доработанный пример: 



body {
  background: url('https://i.pinimg.com/originals/22/06/1e/22061e28e591fb82b41a151d64cefe55.jpg')
no-repeat;
  background-size: cover;
}
    height: 100%;
    width: 100%;
    overflow: hidden;

.bdiv {
    display: table;
}
.container {
position: relative;
    width: 500px;
    margin: 0 auto;
	}
#p1:hover, #p2:hover, #p3:hover{
   fill:dodgerblue;
   color:white;
   opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.8s ease-in-out;
 
   }
   #p1, #p2, #p3
   {
    opacity:0.5;
   -webkit-transition: opacity 0.5s;
       transition: opacity 0.8s ease-in-out;
   }


	
	

 
 





Ответ 4

Решение с вложенным дивом с таким же clip-path:



.content {
  padding: 10px 30px;
  text-align: center;
  font-size: 16px;
  font-family: sans-serif;
  color: ddd;
}
.head-text {
  font-size: 18px;
  color: #eee;
  background: #333;
}
.inborder {
  position: absolute;
  top: 5px; right: 5px; bottom: 5px; left: 5px;
  clip-path: inherit;
}
.border {
  position: relative;
  clip-path: polygon(
    95% 0, 
    100% 45%, 
    100% 100%, 
    5% 100%,
    0 55%, 
    0 0
  );
  background: red;
  min-height: 50px;  
}

  

    Приветствую!