css - texto - Forma de diamante con esquinas redondeadas e imagen de fondo

cuadro de texto redondeado html

Question

Necesito lograr esto:

Tenga en cuenta que el contenedor está girado, pero la imagen no está ..

Y por ahora lo hice:

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>

Pero no puedo encontrar una manera de agregar las esquinas redondeadas con esta solución ...

Pensé que tal vez sería posible crear una forma y usarla como una máscara con CSS y simplemente agregarla en el contenedor con mayor índice Z,

¿Puedes pensar en una mejor manera?

PD: Como último recurso, le pediré al diseñador que cree un archivo .svg (porque la capacidad de respuesta con una imagen no se renderizará correctamente) con esa forma ...

Answer 1

CSS3 clip-path es definitivamente el enfoque más flexible: puede usar SVG para definir clips de imágenes a su gusto.

Aquí hay una herramienta increíble . Sin embargo, no proporciona el cuadrado de la esquina redonda de forma predeterminada, por lo que puede que tenga que escribir su propio SVG (aunque no es realmente difícil).

Si quieres saber más en profundidad, lee el documento de MDN .

Tenga en cuenta que esta función no es compatible con todos los principales navegadores, compruebe el uso de la compatibilidad del navegador.

Un ejemplo aquí con respecto a su publicación:

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>

Answer 2

Esto podría ser un comienzo.

Establezca el ancho / alto del pseudo elemento en su diagonal (√ 2 × ancho = 1.4142 ...) y luego ajústelo para que aparezca en el centro.

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>

Answer 3

Pruebe esto: una máscara absolutamente posicionada sobre una imagen absolutamente posicionada.

.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>

Puede que tenga que jugar con los valores de píxel exactos.

Answer 4

Puede usar 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>

Answer 5

solo use la transformación CSS3 para DIV padre

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>

Answer 6

.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>

Answer 7

Si planeas svg por qué no usarlo de inmediato. No es necesario que le pidas a tu diseñador que lo haga, puedes codificarlo en línea, controlar las esquinas redondeadas, la forma ... y es escalable:

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>

Otros puntos son:

• puede mantener los límites de la forma para las interacciones del usuario (haga clic o pase el mouse)
• mostrarlo en cualquier fondo (degradado de color liso, imagen de fondo ...)

Ejemplo:

#shape:hover{
  cursor:pointer;
  fill:gold;
}
body{
  background:url(''http://i.imgur.com/5NK0H1e.jpg'');
  background-size:cover;
}
svg{display:block;width:50%;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 id="shape" 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>

Answer 8

Tal vez me falta algo, pero se puede hacer simplemente usando una imagen de fondo.

.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>