Uneven Border on Corners-CodePudding

How could I create a border somewhere among the lines of this?

Sample

I've tried using linear gradients for backgrounds (found here) but can't seem to get it to draw the shape I'm looking for.

CodePudding user response：

You could use before and after pseudo elements on the main element to create a background. One would be a red rectangle, and in front of it a white rectangle with CSS clip-path used to get the shape.

Here's an example. Obviously change the % values to be what you want (could be px if that is required).

body {
  background: black;
  width: 100vw;
  height: 100vh;
}

div {
  width: 30vmin;
  height: 50vmin;
  display: inline-block;
  position: relative;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

div::before,
div::after {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

div::before {
  background: red;
}

div::after {
  background: white;
  clip-path: polygon(5% 5%, 50% 0, 95% 5%, 100% 30%, 100% 70%, 95% 95%, 70% 100%, 30% 100%, 5% 95%, 0 70%, 0 30%);
}

<div></div>

CodePudding user response：

If you are looking for a gradient idea then you need to use conic-gradient:

.box {
  --size: 20px;
  --angle: 240deg;
  --g: red var(--angle), lightblue 0; /* the colors here */

  background:
    conic-gradient(from calc(var(--angle)/-2 -  45deg) 
      at top    var(--size) left  var(--size),var(--g)) top left,
    conic-gradient(from calc(var(--angle)/-2   45deg) 
      at top    var(--size) right var(--size),var(--g)) top right,
    conic-gradient(from calc(var(--angle)/-2 - 135deg) 
      at bottom var(--size) left  var(--size),var(--g)) bottom left,
    conic-gradient(from calc(var(--angle)/-2   135deg) 
      at bottom var(--size) right var(--size),var(--g)) bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;  
  width: 300px;
  height: 350px;
}

<div ></div>