Треугольник с частью изображения

#css #css3

Как лучше всего реализовать такой треугольник с частью изображения.



Изначально попробовал перекрыть с фоновым .png изображением. Но, такое решением не
самое практичное.



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

Ответы

Ответ 1

Вот этот вариант наверное подойдет вам.

Здесь с двумя псевдоэлементами before, after.

Ну и конечно же можете убрать hover эффект. Это уже на ваш вкус.



.box {
  margin: 0 auto;
  max-width: 600px;
  background: #fff;
  border: 1px solid #ccc;
}

.content {
  padding: 32px 42px;
  border-radius: 0 0 3px 3px;
}
.content h1 {
  color: #444;
  margin-top: 0;
}

.image {
  width: 100%;
  overflow: hidden;
  padding: 0 0 30%;
  position: relative;
  -webkit-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
  background-image: url("https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800");
  background-size: cover;
}
.image:hover {
  padding-bottom: 35%;
}
.image::before {
  left: 0;
  bottom: 0;
  content: "";
  width: 32px;
  position: absolute;
  border-bottom: 12px solid #fff;
  border-right: 12px solid transparent;
}
.image::after {
  bottom: 0;
  left: 44px;
  content: "";
  width: 100%;
  position: absolute;
  border-bottom: 12px solid #fff;
  border-left: 12px solid transparent;
}

  

  
  

    
What is Lorem Ipsum?
    
  





Вот еще один пример. Реализация примерно такая же как в предыдущем примере.



*:before,*:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    background-color:#ddd;
}
.outer {
    max-width:960px;
    margin:0 auto;
}
.paneltop {
    height:68px;
    background-color:#f00;
}
.car {
    width:100%;
    height:auto;
    position:relative;
}
.car:after {
    content:"";
    display:block;
    width:0;
    border-top:48px solid #f00;  /* downward pointing red arrow */
    border-right:48px dotted transparent;
    border-left:48px dotted transparent;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
}
.car img {
    display:block;
    width:100%;
    height:auto;
}
.panelbottom {
    height:28px;
    background-color:#ff0;
}
.panelbottom:before,
.panelbottom:after {
    content:"";
    width:50%;
    border-bottom:48px solid #ff0;
    margin-top:-48px;
    position:relative;
}
.panelbottom:before {
    border-right:48px dotted transparent;
    float:left;
}
.panelbottom:after {
    border-left:48px dotted transparent;
    float:right;
}

    

    

    






Третий пример.

Здесь правда только треугольник с фоновым изображением. Но может кому то пригодиться.



.kwadrat
{ 
  width: 232px; 
  height: 180px; 
  border-bottom: 1px solid #000; 
  overflow: hidden; 
}
.trojkat
{ 
  position: relative; 
  overflow: hidden; 
  transform: rotate(45deg) skew(10deg,10deg); 
  border-left: 1px solid #000; 
  border-top: 1px solid #000;

  width: 200px;
  height: 200px;
  margin:81px 0 0 16px;
}

.trojkat_bg
{
	position: absolute;
  width: 200%;
  height: 200%;
  top: -67%;
  left: -50%;
  z-index: -1;
  background: url(https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}

.trojkat_bg:hover{ background-size: 90%; }
		
.kwadrat2
{ 
  width: 232px; 
  height: 170px; 
  border-top: 1px solid #000; 
  overflow: hidden; 
  margin-top: 5px; 
}

.trojkat2
{
	position: relative;
  overflow: hidden;
  transform: rotate(45deg) skew(10deg,10deg);
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  width: 200px;
  height: 200px;
  margin:-100px 0 0 16px;
}
.trojkat_bg2
{
	position: absolute;
  width: 240%;
  height: 200%;
  top: 17%;
  left: -50%;
  z-index: -1;
  background: url(https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}

.trojkat_bg2:hover{ background-size: 90%; }

  

    

  



  

  
	





Этот вариант преобразует часть общего контейнера в треугольник.



p {
  color: #fff;
  padding: 0 12px;
  width: 280px;
}
.triangle-fluid {
  background: transparent url("http://placekitten.com/g/1200/500") center center;
  background-size: cover;
  overflow: hidden;
}
.triangle-container {
  box-sizing: border-box;
  padding: 5%;
  position: relative;
}
.triangle {
  background: none;
  border: 0 solid transparent;
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
.triangle-left {
  border-left-color: #fff;
  border-left-width: 4000px;
  border-top-width: 720px;
  left: 0;
}
.triangle-right {
  border-right-color: #fff;
  border-right-width: 4000px;
  border-top-width: 720px;
  right: 0;
}

  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nihil est repudiandae,
facere amet iusto aliquid iste! Inventore, est, consequatur.
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis accusantium blanditiis
officiis.
  

    

    

  



Ответ 2

Еще как вариант:




  





P.S: возьми реализацию с facebook (hover на профиль пользователя)


Ответ 3

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



body {
  margin: 0;
  padding: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #f6f6f6;
}

div {
  position: relative;
  width: 140px;
  height: 288px;
  background-position: center;
  background-size: cover;
  margin: 10px;
}

svg {
  margin: 10px;
    -webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));  
}


/* Делается накладка целиком на изображение. Минусом является отсутсвие возможности
создать тень и невозможность масштабирования, точнее, сложности с масштабированием */

.mask {
  mask: url(https://i.stack.imgur.com/V3TDk.png) no-repeat;
  -webkit-mask: url(https://i.stack.imgur.com/V3TDk.png) no-repeat;
}


/* Тут мы создаем небольшой треугольник перенося фон из основного блока, а затем
создаем для него обрезку по краям. Поддержка IE отсутсвует и cover не подходит для
реализации, так как фон треугольника нужно четко подставить к основному изображению. */

.pseudo-triangle {
  height: 280px;
  border-radius: 10px;
  background-position: left -7px;
  background-size: auto 287px;
}

.pseudo-triangle:before {
  content: '';
  position: absolute;
  left: 20px;
  top: 100%;
  display: block;
  width: 14px;
  height: 7px;
  background-image: inherit;
  background-position: -27px bottom;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}










Это накладка которая использовалась в первом варианте и в варианте с SVG:



Для второго и третьего варианта можно создать тень при помощи filter: drop-shadow.
Для своих личных целей я использовал вариант с псевоэлементом, так как есть затемнение
и разбежности фона не видно совсем, а само изображение можно масштабировать как угодно.



Поддержка для mask - CSS Masks

Поддержка для clip-path - CSS clip-path property

Поддержка для SVG на высоте)