CODEWITHSUNDEEP
javascripthtmlcsssvgfrontend
Calsa
Calsa

Reputation: 45

Is there an SVG Method to doing beveled corners on DIV?

I have been trying to find a way to give div elements a consistent beveled edge. Think paper like in Battlestar Galactica - see image below, I circled what I mean by bevel. To set things up more, these block div elements can be different sizes and dynamically expand / contract with content. Even when they do, I want the bevel to stay a consistent size (as long as there is enough room to bevel)

Basically I need a squared off version of the rounded corner CSS border radius property

Beveled Corners

I have tried methods including Jquery Corner Plugin (seems to no longer work, be maintained, and from documentation only works with a solid background color which wont work for me), Old school DIV generation (lacks transparency underneath so ruins effect), and multiple other methods.

Apparently there is a CSS feature draft pending on adding border-corner-shape, which would do exactly what I want, https://www.hongkiat.com/blog/css3-border-shape/ but its not approved. From an article on Medium, this feature may not be due to lack of developers demanding this feature. (+1 my vote for adding this, who do I beg?)

So, I got to thinking, and it seems this may be possible using SVG. However, although I could see SVG being a solution to build the right shape, I have absolutely no clue how to do this, and a few bad attempts ended in SVG mess all over. Frankly, I don't even know if this can be used given the divs will be different shapes. Disclaimer, I am not a front end web developer, but working on a personal project requiring me to dabble. So I figured I would ask the experts.

Has someone created an SVG solution for this and I am just not seeing it in the 20 odd pages of search results I dug through? Does this seem possible? If likely possible and not done yet, how would one going about this? Is there a better solution to bevel a corner? Is there a simpler option I am overlooking?

Upvotes: 0

Views: 338

Answers (1)

theonly1me
theonly1me

Reputation: 1248

You can use the CSS Clip Path property to basically clip any div (or any element for that matter) into any shape that you need. Please see the example that I'm showing below:

Note: Clip Path doesn't care about the borders itself, it just cuts your entire element to the shape specified. So you need to make sure you add enough padding so the content doesn't get chopped.

Also, you may use the CSS shape-outside property if you want the clipped div to also have a bevelled shape in the DOM (not just visually but the actual shape).

Here's the official MDN documentation for Clip Path : CSS Clip Path

.bevelled{
background-color:red;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 300px;
height: 150px;
}

.bevelled-borders{
background-color:cyan;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 300px;
height: 150px;
border: 5px solid #000;
}
<div class="bevelled"></div>
<br/>
<div class="bevelled-borders"></div>

Upvotes: 1

Related Questions