.file-diagram {
border: 2px solid black;
padding: 14px;
}<span class="file-diagram"> TRA</span>如何更改css中的border-top-right-radius？
想要創建一個看起來像這樣的圖表的檔案......
在 font-awesome 中，我發現了一些有用的類，例如，但我只想在 css 的幫助下做到這一點。
uj5u.com熱心網友回復：
剪輯路徑和一些漸變：
.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 class="box"></div>
<div class="box" style="--b:2px;--c:red;"></div>
<div class="box" style="--b:2px;--s:10px;--c:blue;"></div>
<div class="box" style="--b:8px;--s:30px;--c:purple;"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416929.html
標籤：
上一篇：引導程式中的部分相互沖突
下一篇：如何通過切換按鈕切換語言？