缺角邊框

<div class="out-rect">
<div class="in-rect"></div>
</div>

.out-rect {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 80px;
padding: 5px;
background: linear-gradient(-45deg, transparent 9px, #58a 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.in-rect{
width: 100%;
height: 100%;
background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 語法 最基本,使用 mask 的方式是借助圖片,類似這樣: { /* Image values */ ma...
    長布閱讀 842評(píng)論 0 0
  • background-color background-color:#ff0000紅色background-col...
    每日活菌閱讀 559評(píng)論 0 0
  • 1.使用漸變 因?yàn)闈u變可以接受一個(gè)角度,比如45deg作為方向,而且色標(biāo)的位置信息也可以是絕對(duì)的長度值,不受容器尺...
    0清婉0閱讀 1,506評(píng)論 0 1
  • 一、Background的基本屬性 background-color: background-image:url(...
    WHealer閱讀 3,844評(píng)論 0 1
  • 今天感恩節(jié)哎,感謝一直在我身邊的親朋好友。感恩相遇!感恩不離不棄。 中午開了第一次的黨會(huì),身份的轉(zhuǎn)變要...
    余生動(dòng)聽閱讀 10,817評(píng)論 0 11

友情鏈接更多精彩內(nèi)容