Как обрезать блоки с помощью CSS?

#html #css

Вот есть 3 блока, два с верху и один с низу, два верхних обрезают нижний, а линия
между ними это border, при наводке на любой блок, фон увеличивается, я никак не могу
придумать как обрезать.


    

Ответы

Ответ 1

Предлагаю никак не обрезать.

html
для создания нижнего блока в виде ромба, достаточно повернуть прямоугольный или квадратный
блок под 45%, при этом родительскому блоку выставить overflow: hidden.

.parent {
  overflow: hidden;
}

.child {
  transform: rotate(45deg);
}


Т.к. разворот под 45 градусов, предпалагет разворот и внутренного содержимого под
45, то внут. содержимое нужно развернуть под 45 градусов в обратном направлении.

.child {
  transform: rotate(45deg);
}

.child__inner {
  transform: rotate(-45deg);
}


изображение
Изображения при этом никак особенно обрезать не надо, желательно что бы оно было
достаточно большое, для компенсации зума.

недостатки
Приходится вручную подгонять координаты ромба и внут. содержимого.

Рабочий пример

Для html и css используются препроцессоры jade и stylus соотвественно. Если с ними
не знакомы, там в каждом блоке есть кнопка View Compiled


Ответ 2

*{
  margin:0;
  padding:0;
}
.wrapper{
  width:600px;
  height:500px;
  border:1px solid transparent;
  margin:20px auto;
  overflow:hidden;
  position:relative;
}
.odin{
  width:300px;
  height:200px;
  border-right:2px solid #fff;
  border-bottom:none;
  position:relative;
  top:1px; left:1px;
  background:red;
  
}

.odin_a{
  width:300px;
  height:500px;
  background:url(http://alleya-mebeli.ru/wp-content/uploads/2014/03/bianka.jpg);
  background-size:300px 500px;
  position:absolute;
  top:0; left:0;
  z-index:98;
  overflow:hidden;
  transition:.5s;
  border-right:2px solid #fff;
}
.odin_a:hover{
  background-size:400px 600px;
  background-position:-30px -50px;
}
.dva{
  width:300px;
  height:500px;
   border-left:2px solid #fff; background:url(http://www.rehabmedical.ru/images/sensroom/photogallery/Spb1.jpg);
  background-size:300px 500px;
  position:absolute;
  right:0;
  top:0;
  transition:.5s;
  border:2px solid #fff;
}
.dva:hover{
  background-size:750px 900px;
  background-position:-40px -40px;
}
.try{
  width:600px;
  height:600px;
  border:1px solid blue;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform:rotate(-45deg);
  position:relative;
  left:50%;
  margin-left:-300px;
  top:123px;
  z-index:100;
  background:blue;
  overflow:hidden;
}
.try_b{
  width:130%;
  height:130%;
  background:url(http://www.news-ontime.ru/wp-content/uploads/2014/08/detskaya-komnata-45.jpg);
  background-size:cover;
  transform:rotate(45deg);
  margin:-150px 90px;
  transition:all .5s;
}
.try_b:hover{
  background-size:120% 120%;
}

 
  


 
  


 
   

  





Не могу только один блок сделать - самый нижний , transition, уважаемая публика надеюсь
поможет

http://codepen.io/anon/pen/mPNEex?editors=1100  доделал ! пример


Ответ 3

Как вариант, можно использовать clip-path



.container{
	width:1000px;
	height:800px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.left, .right, .bottom {
	transition:linear 200ms;
	float:left;
	position:absolute;
	z-index:1;
	background:#FFF;
}
.left .bg, .right .bg, .bottom .bg {
	transition:linear 200ms;
	position:absolute;
}
.left {
	height:800px;
	width:800px;
	left:-300px;
	top:0;
	clip-path: polygon(0 0, 100% 0, 100% 560px, 300px 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 560px, 300px 100%, 0 100%);
}
.left .bg {
	width:798px;
	height:800px;
	left:0;
	top:0;
	background:url(https://www.firestock.ru/wp-content/uploads/2014/05/abstract-rings-background-700x524.jpg)
no-repeat 0 0;
	background-size:cover;
	clip-path: polygon(0 0, 100% 0, 100% 558px, 300px 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 558px, 296px 100%, 0 100%);
}
.right {
	height:800px;
	width:800px;
	top:0;
	right:-299px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px);
}
.right .bg {
	width:798px;
	height:800px;
	right:0;
	top:0;
	background:url(https://www.firestock.ru/wp-content/uploads/2015/12/Dollarphotoclub-65301126-light-700x466.jpg)
no-repeat 0 0;
	background-size:cover;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 504px 100%, 0 558px);
}
.bottom {
	height:540px;
	width:1000px;
	left:0;
	bottom:-298px;
	clip-path: polygon(0 100%, 0 240px, 50% 0, 100% 240px, 100% 100%);
	-webkit-clip-path: polygon(0 100%, 0 240px, 50% 0, 100% 240px, 100% 100%);
}
.bottom .bg {
	height:539px;
	width:100%;
	left:0;
	bottom:0;
	background:url(http://www.sunhome.ru/UsersGallery/wallpapers/233/goluboi-fon-oboi.jpg)
no-repeat 0 0;
	background-size:cover;
	clip-path: polygon(0 100%, 0 242px, 50% 2px, 100% 242px, 100% 100%);
	-webkit-clip-path: polygon(0 100%, 0 242px, 50% 2px, 100% 242px, 100% 100%);
}
.left:hover {
	z-index:2;
	left:0;
}
.right:hover {
	z-index:2;
	right:0;
}
.bottom:hover {
	z-index:2;
	bottom:0;
}