左半圆形边框答案

【问题标题】：Left half-rounded border左半圆形边框
【发布时间】：2017-04-05 14:56:27
【问题描述】：

我想知道如何实现我设计的这种 css 活动样式链接形状，我应该为左圆形部分创建一个特定的形状还是应该只使用左边框并尝试调整它？

【问题讨论】：

【解决方案1】：

尝试像这样使用边框半径

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

你认为有可能把切割的部分放在左边吗？也许在这个位置上打球？
只需将border-top-right-radius 替换为border-top-left-radius 和border-bottom-right-radius 替换为border-bottom-left-radius

【解决方案2】：

您可以为此使用::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}

  &lt;div class="link"&gt;&lt;/div&gt;

检查此link。您可以从那里了解更多关于 CSS 伪元素的信息。

【讨论】：

哦，太完美了，我需要学习如何使用 after/before 元素，这样我就不需要在整个列表中添加元素。完美。
很高兴为您提供帮助。