CODEWITHSUNDEEP
htmlcss
Vishal
Vishal

Reputation: 6368

How to show border around image which is clipped by the surrounding div

I have an image as shown below:

enter image description here

Here is my 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>

Here is my 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;
}

What I want:

I want to show the border around image as follows:

enter image description here

What I tried for that:

img
{
    border: 5px solid red;
}

But the border is not showing. How do I show that border?

JSFiddle

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

Upvotes: 1

Views: 81

Answers (3)

Sante
Sante

Reputation: 349

you can create a div with same height and width as your image to wrap that code and give it a border. here is updated code from your fiddle

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

and 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;
}

here is an updated fiddle https://jsfiddle.net/icernn03/gfok1bv8/3/

Upvotes: 1

Ehsan
Ehsan

Reputation: 12951

You can use a wrapper :

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

Upvotes: 0

tech2017
tech2017

Reputation: 1806

You can use css transform property to achieve that. check this fiddle:

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

https://jsfiddle.net/ggukk60j/

Upvotes: 0

Related Questions