CODEWITHSUNDEEP
htmlcss
HeyAche
HeyAche

Reputation: 11

Uneven Border on Corners

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.

Upvotes: 0

Views: 83

Answers (2)

Temani Afif
Temani Afif

Reputation: 274307

If you are looking for a gradient, here is an idea using conic-gradient. All you have to do is adjust a few variables to control the shape

.box {
  --size: 15px;
  --angle: 250deg;
  --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: 300px;
  display: inline-block;
}
<div class="box"></div>
<div class="box" style="--size:10px; --angle: 255deg"></div>

Upvotes: 0

A Haworth
A Haworth

Reputation: 36664

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>

Upvotes: 1

Related Questions