How can I make a cut corner for the border like in the image below答案

【问题标题】：How can I make a cut corner for the border like in the image belowHow can I make a cut corner for the border like in the image below
【发布时间】：2022-12-02 04:47:14
【问题描述】：

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

HTML

<div class="card">
   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

【问题讨论】：

Does this answer your question? Slanted Corner on CSS box
@VilleKoo I'm afraid not, because this is a solution with a solid fill, without a visible border

标签： html css google-chrome safari border

【解决方案1】：

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;
  
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

You can use CSSclip-pathproperty:

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 class="card">
   title text
</div>

【讨论】：