CODEWITHSUNDEEP
htmlcsssvg
Gerpea
Gerpea

Reputation: 309

How to draw a corner border with svg?

I have a dynamic size div with a border on it and I want add corners border to that, with one corner skew. I'm trying to do this with svg.

But the vertical and horizontal line in svg are not same size. I understand that I'm just writing this code wrong. I tried all of the combination of preserveAspectRatio with no result.

But I cannot figure out how to achieve the same size for vertical and horizontal lines with svg filling the div.

.container {
  position: relative;
  background-color: black;
  border: 1px solid red;
  padding: 25px;
  color:white;
}

.container > svg {
  position: absolute;
  left: 0;
  top: 0;
}

.container > svg > path {
  stroke: red;
}
 <div class="container">
      <svg width='100%' height='100%' viewBox='0 0 100 100' preserveAspectRatio='none'>
        <path
          d='M0,0 H25 M0,0 V25'
          fill='none'
          stroke-width='5'
          vector-effect='non-scaling-stroke'
        />
        <path
          d='M90,0 L75,0 M90,0 L100,10 M100,10 L100,25'
          fill='none'
          stroke-width='5'
          vector-effect='non-scaling-stroke'
        />
        <path
          d='M100,100 L75,100 M100,100 L100,75'
          fill='none'
          stroke-width='5'
          vector-effect='non-scaling-stroke'
        />
        <path
          d='M0,90 L0,75 M0,90 L10,100 M10,100 L25,100'
          fill='none'
          stroke-width='5'
          vector-effect='non-scaling-stroke'
        />
      </svg>
      <p>fancy text here</p>
    </div>

Upvotes: 1

Views: 608

Answers (1)

Temani Afif
Temani Afif

Reputation: 273967

You can do it with CSS like below:

.container { 
  --c: red;  /* control the color */
  --b: 20px; /* control the cut part */
  --t: 3px;  /* thickness of the bordr */
  --l: 40px; /* length of the border*/
  
  --g:linear-gradient(red 0 0);
  background: 
    var(--g) 0 0 / var(--l) var(--t), 
    var(--g) 0 0 / var(--t) var(--l), 
    var(--g) 100% 0 / var(--l) var(--t), 
    var(--g) 100% 0 / var(--t) var(--l), 
    var(--g) 100% 100% / var(--l) var(--t), 
    var(--g) 100% 100% / var(--t) var(--l), 
    var(--g) 0 100% / var(--l) var(--t), 
    var(--g) 0 100% / var(--t) var(--l),
    linear-gradient(  45deg,red calc(50% + var(--t)),#0000 0) 0    100%/var(--b) var(--b),
    linear-gradient(-135deg,red calc(50% + var(--t)),#0000 0) 100% 0   /var(--b) var(--b),
    lightblue;
  background-repeat: no-repeat;
  clip-path:polygon(0 0,calc(100% - var(--b)) 0,100% var(--b),100% 100%,var(--b) 100%,0 calc(100% - var(--b)));
  padding: 50px 25px;
  position:relative;
}
<div class="container">
  <p>fancy text here</p>
</div>

Upvotes: 2

Related Questions