右箭頭鍵入邊欄

Question

我已經將這個問題撞了幾個小時，但仍然無法弄清楚如何實現這個箭頭右側的側邊欄。我想要這樣的側邊欄的外觀。 Sidebar UI I want to achieve

我該如何實現該箭頭右側邊欄？有沒有類似的代碼可以用作基礎？

Answer 1

\t .right-arrow { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t background: orange; 
 
\t padding: 20px; 
 
} 
 
.right-arrow:after { 
 
\t content: ''; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 100%; 
 
\t top: 0; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 20px solid transparent; 
 
\t border-right: 20px solid transparent; 
 
\t border-bottom: 20px solid transparent; 
 
\t border-left: 20px solid orange; 
 
}

<div class="right-arrow"></div>

Answer 2

這可以通過僞類的幫助下完成":before or :after"

li { width:200px; background:green; list-style-type:none; margin-bottom:20px; padding:5px; color:#fff; position:relative;} 
 
li:before { 
 
    content:""; 
 
    position:absolute; 
 
    right:-14px; top:0px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 14px solid transparent; 
 
    border-bottom: 14px solid transparent; 
 
    border-left: 14px solid green; 
 
}

<ul> 
 
<li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    </ul>