左半分のボーダー

Question

私はこの種のCSSアクティブスタイルのリンク形状を実現する方法を考えていますが、左の丸みを帯びた部分のために特定の形状を作成する必要がありますか、 ？

Answer 1

のような国境半径を使用してみてください。例は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 Pseudo-Elementsについてもっと知ることができます。

Answer 2

は、あなたがこのために::after CSS擬似要素を使用することができ、この

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

<div></div>