CODEWITHSUNDEEP
css
Mhernandez1251
Mhernandez1251

Reputation: 31

Can you give an image an angled edge?

I am trying to create a comicbook panel effect where the edges are angled. I provided an example picture of what i am trying to get. Can this be done with css?

enter image description here

Upvotes: 0

Views: 350

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122087

You can do this with SVG

.element {
  text-align: center;
}
svg {
  width: 40vw;
  overflow: visible;
}
.st0 {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-miterlimit: 10;
}
.st1 {
  fill: white;
  stroke: #000000;
  stroke-miterlimit: 10;
}
polygon {
  transition: all 0.3s ease-in;
  transform-origin: center;
}
polygon:hover {
  transform: scale(1.1);
}
<div class="element">
  <svg viewBox="0 0 250 400" style="enable-background:new 0 0 250 400;">
    <polygon class="st0" points="12.111,175.777 12.111,9.111 239.889,9.111 239.889,80.222 " />
    <polygon class="st0" points="239.889,257.444 239.889,86.889 12.111,182.444 12.111,217.444 " />
    <polygon class="st1" points="106.84,241.17 106.84,393.56 12.11,393.56 12.11,225.22 " />
    <polygon class="st1" points="239.89,263.56 239.89,393.56 118.05,393.56 118.05,243.05 " />
  </svg>
</div>

Upvotes: 0

Drown
Drown

Reputation: 5982

Yes, this can be done in CSS using the clip-path property.

With the polygon() value you can achieve pretty much any shape you want. It is used like this : 

clip-path: polygon(a, b, c, [...])

Each letter in the example above represents the coordinate of a point in the path, and each point has an X and a Y value, starting from the top-left.

For instance, this : 

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

... means that the first point will be at 50% X and 0%, so top-center. The second point (0% 100%) will be at 0% X and 100% Y, so bottom-left. The last point (100% 100%) will be at 100% X and 100% Y, so bottom-right. This will make a triangle shape.

Clippy is a nice tool that will generate the clip-path for you, you can drag and drop the points where you want them and simply copy the clip-path it generates for you.

Keep in mind that the browser compatibility is not very good for this.

Upvotes: 1

RefreshCarts
RefreshCarts

Reputation: 126

It can be done with css clipping but browser compatability may be an issue for you, see the link below for details.

https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

Upvotes: 0

Related Questions