如何显示由周围div剪裁的图像周围的边框

Question

我的图像如下所示：

这是我的HTML：

<div class="diamond-border" style="left:10px;top:10px"></div>
<div class="diamond" style="left:13px;top:13px" >
  <img src="http://res.cloudinary.com/demo/image/upload/sample.jpg" />
</div>

这是我的css：

.diamond
{
  background-color: white;
  height: 260px;
  width: 260px;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  
}

.diamond-border
{
  background-color: #AAA;
  height: 266px;
  width: 266px;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.diamond img
{
    height: 300px;
    width: 300px;
} 

我想要的是什么：

我想按照以下方式显示图像边框：

我为此尝试了什么：

img
{
    border: 5px solid red;
}

但是边界没有显示出来。如何显示边框？

的jsfiddle

https://jsfiddle.net/Vishal1419/gfok1bv8/

Answer 1

您可以创建一个与图像具有相同高度和宽度的div来包装该代码并为其指定边框。 这里是你小提琴的更新代码

<div class="diamond-container">
   <div class="diamond-border" style="left:10px;top:10px"></div>
   <div class="diamond" style="left:13px;top:13px" >
      <img src="https://res.cloudinary.com/demo/image/upload/sample.jpg" />
   </div>
</div>

和css：

    .diamond
{
  background-color: white;
  height: 260px;
  width: 260px;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  
}

.diamond-border
{
  background-color: #AAA;
  height: 266px;
  width: 266px;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.diamond img
{
    height: 300px;
    width: 300px;
}
.diamond-container{
  border: 5px solid red;
  height: 300px;
    width: 300px;
}

这是一个更新的小提琴 https://jsfiddle.net/icernn03/gfok1bv8/3/

Answer 2

您可以使用css transform属性来实现此目的。检查这个小提琴：

-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

https://jsfiddle.net/ggukk60j/

Answer 3

您可以使用包装器：

#wrapper {
	border:5px solid red;
	height: 300px;
	width: 300px;
}
	

.diamond
{
  background-color: white;
  height: 260px;
  width: 260px;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  
}

.diamond-border
{
  background-color: #AAA;
  height: 266px;
  width: 266px;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.diamond img
{
    height: 300px;
    width: 300px;
} 

<div id="wrapper">

    <div class="diamond-border" style="left:10px;top:10px"></div>

    <div class="diamond" style="left:13px;top:13px" >
	  <img src="http://res.cloudinary.com/demo/image/upload/sample.jpg" />
     </div>

</div>