左半圓邊框

Question

我想知道如何實現這種CSS設計的活動樣式鏈接形狀，我應該爲左圓角部分創建一個特定的形狀還是應該使用邊界左側並嘗試調整它？

Answer 1

邊框半徑可以使用::after CSS僞元素這一點。以下是示例fiddle。希望這可以幫助你。

.link { 
 
     height: 100px; 
 
     width: 100px; 
 
     background: red; 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 
    .link::after{ 
 
     content: ""; 
 
     height: 80%; 
 
     background: #fff; 
 
     width: 20px; 
 
     position: absolute; 
 
     top: 10%; 
 
     left: -10px; 
 
     border-radius: 20px; 
 
      transition: all .35s; 
 
     opacity: 0; 
 
    } 
 
    .link:hover::after{opacity:1}

<div class="link"></div>

檢查這個link。您可以從此處更多地瞭解CSS僞元素。

Answer 2

嘗試使用這樣

div { 
 
    width: 10px; 
 
    height:40px; 
 
    background-color: black; 
 
    border-top-right-radius: 6px; 
 
    border-bottom-right-radius:6px; 
 
}

<div></div>