.file-diagram {
  border: 2px solid black;
  padding: 14px;
}

<span > TRA</span>

How to change the border-top-right-radius in css?

Want to create a file look like diagram like this...

In font-awesome, I found some useful class like , But I want to do that only with help of css.

CodePudding user response：

A clip-path and some gradients:

.box {
  --b:5px;
  --s:20px;
  --c:green;

  width:50px;
  height:60px;
  display:inline-block;
  margin:10px;
  border:var(--b) solid var(--c);
  clip-path:polygon(0 0,calc(100% - var(--s)) 0,100% var(--s),100% 100%,0 100%);
  background:
    linear-gradient(to bottom left,var(--c) calc(50% - 0.3*var(--b)),#0000 0),
    conic-gradient(at left var(--b) bottom var(--b),#0000 90deg,var(--c) 0);
  background-position:top right;
  background-size:var(--s) var(--s);
  background-repeat:no-repeat;
}

<div ></div>
<div  style="--b:2px;--c:red;"></div>
<div  style="--b:2px;--s:10px;--c:blue;"></div>
<div  style="--b:8px;--s:30px;--c:purple;"></div>