Create border arround special beveled css shape?

Question

I want to create a border that goes around a beveled corner as shown below.

The current code I have for creating the beveled corners is:

.contact {
    flex-grow: 2;
    z-index: 2;
    position:relative;
    display: block;
    margin: 40px 40px;
    padding: 60px; 
    text-align: center;
    background-color: #343434;
}

.bevel {
    overflow:hidden;
    clip-path: polygon(
        0 10%,
        10% 0,
        90% 0,
        100% 10%,
        100% 90%,
        90% 100%,
        10% 100%,
        0% 90%,
        0% 10%);
}

<form id="contact" class="contact bevel">
  <!-- content makes up width and height --!>
</form>

I have no idea how to make the border, the way I am doing the bevel is also an issue because it is a percentage and not pixels, which makes it look weird. I also need the border to work on a shape with just one beveled corner.

Thank you

Have a look at [link]https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style where there are several ideas for achieving this on a convex polygon. — A Haworth, May 16 '21 at 09:03

Temani Afif · Accepted Answer · 2021-05-16T09:20:31.947

You can achieve using clip-path and multiple background:

.box {
  --d:30px; /* control the clip-path */
  --b:4px;  /* the border length */
  --c:orange; /* the color */
  
  --gc:var(--c) calc(50% + var(--b)*0.707),#0000 0;
  --gl:var(--c), #0000 40% 60%,var(--c);
  
  
  height:200px;
  margin:50px;
  clip-path:polygon(var(--d) 0,calc(100% - var(--d)) 0,100% var(--d),100% calc(100% - var(--d)),calc(100% - var(--d)) 100%, var(--d) 100%, 0 calc(100% - var(--d)),0 var(--d));
  
  background:
    /* the corners */
    linear-gradient( 135deg, var(--gc)) 0    0   /var(--d) var(--d),
    linear-gradient(  45deg, var(--gc)) 0    100%/var(--d) var(--d),
    linear-gradient( -45deg, var(--gc)) 100% 100%/var(--d) var(--d),
    linear-gradient(-135deg, var(--gc)) 100% 0   /var(--d) var(--d),
    
    /* the lines */
    linear-gradient(90deg, var(--gl)) top   /100% var(--b),
    linear-gradient(90deg, var(--gl)) bottom/100% var(--b),
    linear-gradient( 0deg, var(--gl)) left  /var(--b) 100%,
    linear-gradient( 0deg, var(--gl)) right /var(--b) 100%;
  background-repeat:no-repeat;
  position:relative;
}

<div class="box">

</div>

And with the background layer:

.box {
  --d:30px; /* control the clip-path */
  --b:4px;  /* the border length */
  --c:orange; /* the color */
  --s:10px; /* control the space with the background layer*/
  
  --gc:var(--c) calc(50% + var(--b)*0.707),#0000 0;
  --gl:var(--c), #0000 40% 60%,var(--c);
  
  
  height:200px;
  margin:50px;
  clip-path:polygon(var(--d) 0,calc(100% - var(--d)) 0,100% var(--d),100% calc(100% - var(--d)),calc(100% - var(--d)) 100%, var(--d) 100%, 0 calc(100% - var(--d)),0 var(--d));
  
  background:
    /* the corners */
    linear-gradient( 135deg, var(--gc)) 0    0   /var(--d) var(--d),
    linear-gradient(  45deg, var(--gc)) 0    100%/var(--d) var(--d),
    linear-gradient( -45deg, var(--gc)) 100% 100%/var(--d) var(--d),
    linear-gradient(-135deg, var(--gc)) 100% 0   /var(--d) var(--d),
    
    /* the lines */
    linear-gradient(90deg, var(--gl)) top   /100% var(--b),
    linear-gradient(90deg, var(--gl)) bottom/100% var(--b),
    linear-gradient( 0deg, var(--gl)) left  /var(--b) 100%,
    linear-gradient( 0deg, var(--gl)) right /var(--b) 100%;
  background-repeat:no-repeat;
  position:relative;
  z-index:0
}

.box::before {
  content:"";
  position:absolute;
  --d1:calc(var(--d) - var(--s)*0.707);
  inset:var(--s);
  clip-path:polygon(var(--d1) 0,calc(100% - var(--d1)) 0,100% var(--d1),100% calc(100% - var(--d1)),calc(100% - var(--d1)) 100%, var(--d1) 100%, 0 calc(100% - var(--d1)),0 var(--d1));
  background:grey;
}

<div class="box">

</div>

<div class="box" style="--c:red;--d:20px;--b:5px;--s:14px">

</div>

Create border arround special beveled css shape?

1 Answers1