css中的角落設計

Question

我有這張圖片，我想知道如何獲得這個設計。如何在CSS和html中設計突出顯示的邊框。

Answer 1

使用幾個僞元素，並創建自己的邊界三角形，然後放置它們絕對要坐在哪裏你想要的。

More information on pseudo elements

例

div{ 
 
    background:#999; 
 
    height:300px; 
 
    position:relative; 
 
    width:100px; 
 
} 
 
div::before,div::after{ 
 
    content:""; 
 
    left:100px; 
 
    position:absolute; 
 
} 
 
div::before{ 
 
    border-bottom:20px solid #333; 
 
\t border-right:20px solid transparent; 
 
    top:0; 
 
} 
 
div::after{ 
 
    border-top:20px solid #333; 
 
\t border-right:20px solid transparent; 
 
    bottom:0; 
 
}

<div></div>