带圆角的菱形和背景图像

Question

我需要实现这个：

请注意容器已旋转但图片未旋转..

现在我做了：

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>

但是我找不到用这个解决方案添加圆角的方法...

我认为也许可以创建一个形状并将其用作 css 的遮罩，然后将其添加到具有更高 z-index 的容器中，

你能想到更好的办法吗？

PD：作为最后的手段，我会要求设计师创建一个具有该形状的 .svg（因为响应性与图像将无法正确呈现）..

Answer 1

只需对父级使用 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>

Answer 2

这可能是一个开始。

设置伪元素的width/height到它的对角线(√ 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>

Answer 3

您可以使用 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 4

CSS3 clip-path 绝对是最灵活的方法 - 您可以根据需要使用 SVG 来定义图像剪辑。

这是一个 amazing tool。但是，它默认不提供圆角正方形，因此您可能必须编写自己的 SVG（虽然并不难）。

如果您想更深入地了解，请阅读MDN doc。

请注意：并非所有主流浏览器都支持此功能，请检查caniuse浏览器兼容性。

这里有一个关于您的 post 的例子：

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 5

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

您可能需要使用精确的像素值。

Answer 7

如果您计划使用 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>

其他要点是：

您可以为用户交互（点击或悬停）保持形状的边界
在任何背景上显示它（纯色渐变、背景图像...）

示例：

#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

也许我遗漏了什么，但可以简单地使用背景图像来完成。

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

Answer 9

<svg xmlns="http://www.w3.org/2000/svg" width="116" height="100%" viewBox="0 0 135 135">
<pattern id="amw-image" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://kinoscenariy.com/wp-content/uploads/2018/03/Emma-Stone-on-the-set-of-Maniac-in-NYC-27-150x150.jpg"></image></pattern>

<path fill="url(#amw-image)" stroke="#dd3333" stroke-width="0.7" d="M59.014718625761 3.8603896932107a12 12 0 0 1 16.970562748477 0l55.154328932551 55.154328932551a12 12 0 0 1 0 16.970562748477l-55.154328932551 55.154328932551a12 12 0 0 1 -16.970562748477 0l-55.154328932551 -55.154328932551a12 12 0 0 1 0 -16.970562748477 Z"></path>
</svg>

带圆角的菱形和背景图像

Diamond shape with rounded corners and background image

css

svg

css-shapes