钻石形状与圆角和背景图像

时间：2015-12-13 09:49:45

标签： css css3 svg css-shapes

我需要实现这个目标：

diamond with image and rounded corners

请注意，容器已旋转，但图片不是..

现在我做了：

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（因为图像的响应性无法正确呈现）。

9 个答案:

答案 0 :(得分：15)

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

答案 1 :(得分：4)

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

这是一个amazing tool。但是，默认情况下它不提供圆角方形，因此您可能必须编写自己的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>

答案 2 :(得分：3)

这可能是一个开始。

将伪元素的宽度/高度设置为对角线（√2×宽度= 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>

答案 3 :(得分：2)

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

答案 4 :(得分：2)

您可以使用css clip-path。

＆＃13;
＆＃13; 
.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%);
}
＆＃13; 
<div class="wrapper">
  <div class="img">
    <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：2)

试试这个 - 在绝对定位的图像上绝对定位的遮罩。

＆＃13;
＆＃13; 
.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 */
}
＆＃13; 
<div class="image-container">
  <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
  <div class="mask"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

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

答案 6 :(得分：1)

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

答案 7 :(得分：0)

也许我错过了一些东西，但可以简单地使用背景图片来完成。

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

答案 8 :(得分：0)

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

相关问题
最新问题