左半圆边框

时间:2016-11-22 03:25:58

标签: css border rounded-corners

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

enter image description here

2 个答案:

答案 0 :(得分:1)

尝试使用像这样的边框半径

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

答案 1 :(得分:1)

你可以使用::after css伪元素。以下是示例fiddle。希望这会对你有所帮助。

&#13;
&#13;
.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}
&#13;
  <div class="link"></div>
&#13;
&#13;
&#13;

检查link。你可以从那里更多地了解CSS Pseudo-elements。