矩形右手邊三角形輪廓僅

Question

我found下面的CSS代碼來創建矩形加右手邊三角形

div{ 
 
    position: relative;/*it important to set this to relative to be able to use :before in absolute*/ 
 
    width: 60px; 
 
    height: 40px; 
 
    background: red 
 
} 
 

 
div:before{ 
 
    content: ''; 
 
    position:absolute; 
 
    left: 100%; 
 
    top: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    border-left: 20px solid red 
 

 
}

<div>Play</div>

我應該怎麼做同樣的事情，但只有大綱？

樣本圖像會像波紋管（2號箱）：

Answer 1

與:after玩定位在:before創建鑲邊。

div{ 
 
    position: relative;/*it important to set this to relative to be able to use :before in absolute*/ 
 
    width: 60px; 
 
    height: 40px; 
 
    background: white; 
 
    border: 1px solid red; 
 
} 
 

 
div:before{ 
 
    content: ''; 
 
    position:absolute; 
 
    left: 100%; 
 
    top: -1px; 
 
    border-top: 21px solid transparent; 
 
    border-bottom: 21px solid transparent; 
 
    border-left: 21px solid red 
 

 
} 
 

 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
    margin-right: -2px; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    border-left: 20px solid white; 
 

 
}

<div>Play</div>