左半圆边框

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>