How can I make a cut corner for the border like in the image below-CodePudding

I already have one solution which going like this one below. But at Safari it looks like there is no margin-right: -5px;. Are there another ways to done this task or fixes for already existing solution.

HTML

<div >
   Title text
</div>

CSS

.card {
    width: 243px;
    height: 400px;

    display: flex;
    flex-direction: column;
    background-color: gray;
    border: 1px solid black;
    border-radius: 8px 0px 8px 8px;
}

&::before {
    border-right: 1px solid black;
    width: 30px;
    height: 55px;
    margin-top: -22px;
    margin-right: -5px;
    content: '';
    position: absolute;
    align-self: flex-end;
    transform: rotate(130deg);
    background: gray;
}

The expected result looks like this

CodePudding user response：

clip-path combined with a gradient can do it:

.box {
  --b: 5px; /* border */
  --s: 50px; /* size of the cut */
  --c: red;
  
  width: 300px;
  height: 200px;
  
  border: var(--b) solid var(--c);
  border-radius: 20px;
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% var(--s),100% 100%,0 100%);
  background: linear-gradient(-135deg,var(--c) calc(0.707*var(--s)   var(--b)),#0000 0) border-box;
  background-color: grey;
  
}

<div ></div>

CodePudding user response：

You can use CSS clip-path property:

clip-path: polygon(0 0, 80% 0%, 100% 20%, 100% 100%, 0 100%);

I recommend Clippy generator: https://bennettfeely.com/clippy/

Overall code:

.card {
    width: 243px;
    height: 400px;
    display: flex;
    flex-direction: column;
    background-color: gray;
    border-radius: 5px;
    clip-path: polygon(0 0, 80% 0%, 100% 20%, 100% 100%, 0 100%);
}

<div >
   title text
</div>