Алмазная форма с закругленными углами и фоном

Мне нужно добиться этого:

алмаз с изображением и закругленными углами

Обратите внимание, что контейнер вращается, но изображение отсутствует.

И теперь я сделал:

div.img {
  position: relative;
  overflow: hidden;
  width: 320px;
}
div.img img {
  display: block;
  width: 100%
}
div.img span {
  position: absolute;
  content: "";
  width: 75%;
  height: 75%;
  transform: rotate(133deg);
  background: white
}
div.img span.tl {
  top: -36%;
  left: -36%
}
div.img span.bl {
  bottom: -36%;
  left: -36%
}
div.img span.br {
  bottom: -36%;
  right: -36%
}
div.img span.tr {
  top: -36%;
  right: -36%
}
<div class="img">
  <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
  <span class="tl"></span>
  <span class="bl"></span>
  <span class="tr"></span>
  <span class="br"></span>
</div>

ОТВЕТЫ

Ответ 1

Если вы планируете svg, почему бы не использовать его сразу. Вам также не нужно просить своего дизайнера сделать это, вы можете закодировать его встроенным, управлять закругленными углами, формой... и масштабируемо:

svg{display:block;width:30%;height:auto;}
<svg viewbox="1 1 8 8">
  <pattern id="image" width="10" height="10" patternUnits="userSpaceOnUse">
    <image xlink:href="http://i.imgur.com/kreZqnx.jpg" x="0" y="0" height="10" width="10" />
  </pattern>
  <path d="M5.5 1.5 L8.5 4.5 Q9 5 8.5 5.5 L5.5 8.5 Q5 9 4.5 8.5 L 1.5 5.5 Q1 5 1.5 4.5 L4.5 1.5 Q 5 1 5.5 1.5z" fill="url(#image)" />
</svg>

Ответ 2

CSS3 clip-path - это, безусловно, самый гибкий подход - вы можете использовать SVG для определения клипов изображений по вашему желанию.

Здесь удивительный инструмент. Тем не менее, он не предоставляет квадрат круглого угла по умолчанию, поэтому вам, возможно, придется написать собственный SVG (на самом деле это не сложно).

Если вы хотите узнать больше в глубине, прочитайте MDN doc.

Обратите внимание. Эта функция не поддерживается всеми основными браузерами, проверьте caniuse для совместимости браузера.

Пример здесь относительно вашего сообщения:

html, body {
  margin: 0;
  padding: 0;
}

img {
  width: 200px;
  height: 200px;
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}
<img src="http://lorempixel.com/320/320/nature/?v2s">
<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path d="M 95 5 Q 100 0 105 5 L 195 95 Q 200 100 195 105 L 105 195 Q 100 200 95 195 L 5 105 Q 0 100 5 95 Z" />
    </clipPath>
  </defs>
</svg>

Ответ 3

Это может быть начало.

Задайте ширину/высоту псевдоэлемента по диагонали (√ 2 × width = 1.4142...), а затем отрегулируйте ее, чтобы она отображалась в центре.

div.img {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
  width: 220px;
  height: 220px;
  transform: rotate(45deg);
  border-radius: 10%;
}
div.img:before {
  position: absolute;
  top: -21%;
  left: -21%;
  width: 142%;
  height: 142%;
  content: "";
  transform: rotate(-45deg);
  background-image: url(http://lorempixel.com/320/320/nature/4);
  overflow: hidden;
}

div.img2 {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
  width: 110px;
  height: 110px;
  transform: rotate(45deg);
  border-radius: 10%;
}
div.img2 img {
  position: absolute;
  top: -21%;
  left: -21%;
  width: 142%;
  height: 142%;
  transform: rotate(-45deg);
  overflow: hidden;
}
<div class="img">
</div>
<div class="img2">
  <img src="http://lorempixel.com/320/320/nature/4" alt="img">
</div>

Ответ 4

просто используйте преобразование CSS3 для родительского DIV

div.img {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin:50px;
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); 	/* IE 9 */
  -moz-transform:rotate(45deg); 	/* Firefox */
  -webkit-transform:rotate(45deg); /* Safari & Chrome */
  -o-transform:rotate(45deg); 	/* Opera */
  border-radius: 8px;
}
div.img img {
  display: block;
  width: 350px;
  transform:rotate(-45deg);
  -ms-transform:rotate(-45deg); 	/* IE 9 */
  -moz-transform:rotate(-45deg); 	/* Firefox */
  -webkit-transform:rotate(-45deg); /* Safari & Chrome */
  -o-transform:rotate(-45deg); 	/* Opera */
  border-radius: 8px;
  margin-top: -100px;
}
   
<div class="img">
  <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
</div>

Ответ 5

Вы можете использовать css clip-path.

.wrapper {
  background-color: #FEF7E4;
  display: inline-block;
  padding: 10px;
}
div.img {
  position: relative;
  overflow: hidden;
  width: 320px;
  -webkit-clip-path: circle(155px at center);
}
div.img img {
  display: block;
  width: 100%;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
<div class="wrapper">
  <div class="img">
    <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
  </div>
</div>

Ответ 6

Попробуйте это - абсолютно помещенная маска над абсолютно позиционируемым изображением.

.image-container {
  position: relative;
  overflow: hidden;
  width: 320px;
}

.image-container img {
  display: block;
  width: 100%;
  z-index: 1;
}

.image-container .mask {
  z-index: 2;
  position: absolute;
  width: 70%;
  height: 70%;
  background-color: rgba(0, 0, 0, 0);
  border: 150px solid #eeeeee;
  border-radius: 160px;
  top: -102px;
  left: -102px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -moz-transform: rotate(45deg);
  /* Firefox */
  -webkit-transform: rotate(45deg);
  /* Safari & Chrome */
  -o-transform: rotate(45deg);
  /* Opera */
}
<div class="image-container">
  <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
  <div class="mask"></div>
</div>

Ответ 7

.content {
  background-color: #FEF7E4;
  display: inline-block;
  padding: 10px;
}
div.img {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin:50px;
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); 	/* IE 9 */
  -moz-transform:rotate(45deg); 	/* Firefox */
  -webkit-transform:rotate(45deg); /* Safari & Chrome */
  -o-transform:rotate(45deg); 	/* Opera */
  border-radius: 8px;
}
div.img img {
  display: block;
  width: 350px;
  transform:rotate(-45deg);
  -ms-transform:rotate(-45deg); 	/* IE 9 */
  -moz-transform:rotate(-45deg); 	/* Firefox */
  -webkit-transform:rotate(-45deg); /* Safari & Chrome */
  -o-transform:rotate(-45deg); 	/* Opera */
  border-radius: 8px;
  margin-top: -100px;
}
   
<div class="content">
<div class="img">
  <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
</div>
</div>

Ответ 8

Возможно, мне что-то не хватает, но это можно сделать просто с использованием фонового изображения.

.container {
  padding: 4rem;
  background-image:url(https://unsplash.it/800);
  background-size: cover;
}

.box {
  position: relative;
  overflow: hidden;
  width: 8rem;
  height: 8rem;
  border-radius: 1rem;
  background: #000;
  transform: rotate(45deg);
}

.box:after {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: -1.5rem;
  right: -1.5rem;
  bottom: -1.5rem;
  background-image:url(https://unsplash.it/500);
  background-size: cover;
  transform: rotate(-45deg);
}

.box:hover:after {
  background: #ffff00;
}
<div class="container">
  <div class="box"></div>
</div>