使用CSS为段落创建一个右外弯曲层

Question

我正在尝试制作一个段落列表,其中一个应该被选中,就像下图所示,但似乎我不能成功.

我已经尝试了一些东西:http://jsfiddle.net/bmj2j2wd/但结尾只是没有曲线我想要的方式......即向外,而不是向内.

这是从那里的css:

.active{
    border:2px solid dodgerblue;
    border-bottom:0;
    width:80px;
    height:32px;
    margin:10px;
    position:relative;
    border-radius:16px 16px 0 0;
}
.active:after,
.active:before{
    content:'';
    width:80px;
    height:32px;
    border:2px solid dodgerblue;
    position:absolute;
    bottom:-8px;
    border-top:0;
}
.active:after{
    border-left:0;
    border-radius:0 0 16px 0;
    down:-16px;
}
.active:before{
    border-right:0;
    border-radius:0 0 0 16px;
    up:-16px;
}

但它看起来完全不对.

非常重要的是曲率之后的两条右线将一直向上和向下直到页面的顶部和底部.

所以,我想请求社区的一些帮助,以使这项工作.

Answer 1

您基本上可以使用:before和:after创建一个顶部的框和一个活动<p>元素底部的框(p.active).使用这两个框,您可以更改边框的方向.下面显示了一个基于元素的动态长度示例(JSFiddle上的代码):

请参阅以下解决方案(编辑前的原始答案):

.container :not(.active) {
  border-right:1px solid dodgerblue;
  margin:0;
  padding:10px 10px 10px 20px;
  width:72px;
}
.active {
  border:1px solid dodgerblue;
  border-radius:5px 0 0 5px;
  border-right:0;
  height:32px;
  line-height:32px;
  margin:10px;
  padding-left:10px;
  position:relative;
  width:80px;
}
.active:after, .active:before {
  border-right:1px solid dodgerblue;
  content:'';
  height:32px;
  right:-2px;
  position:absolute;
  width:80px;
}
.active:after {
  border-bottom-right-radius: 5px;
  transform:translateY(-100%);
}
.active:before {
  border-top-right-radius:5px;
  transform:translateY(100%);
}

<div class="container">
  <p>item1</p>
  <p>item2</p>
  <p>item3</p>
  <p class="active">item4</p>
  <p>item5</p>
  <p>item6</p>
</div>

您想在页面的整个高度上设置垂直边框.这是一个非常困难的事情,但您可以使用以下解决方案使用隐藏溢出的容器(太长的边框)(JSFiddle上的代码):

body, html {
  margin:0;
  padding:0;
}
.container {
  height:100vh;
  margin:0;
  overflow:hidden;
  padding:0;
}
p {
  display:block;
  height:32px;
  line-height:32px;
  margin:10px;
  padding:0;
  padding-left:10px;
}
.active {
  border:1px solid dodgerblue;
  border-radius:5px 0 0 5px;
  border-right:0;
  position:relative;
  width:80px;
}
.active:after, .active:before {
  border-right:1px solid dodgerblue;
  content:'';
  height:100vh; /** same height like container */
  position:absolute;
  right:-2px;
  width:80px;
}
.active:after {
  border-bottom-right-radius:5px;
  transform:translateY(-100%);
}
.active:before {
  border-top-right-radius:5px;
  transform:translateY(32px);
}

<div class="container">
  <p>item1</p>
  <p>item2</p>
  <p>item3</p>
  <p class="active">item4</p>
  <p>item5</p>
  <p>item6</p>
  <p>item7</p>
</div>

另一个可能有用的示例,使用:hover而不是.active设置活动元素.这对于测试也很有用(JSFiddle上的代码):

body, html {
  margin:0;
  padding:0;
}
.container {
  height:80vh;
  margin:0;
  overflow:hidden;
  padding:0;
}
p {
  border:1px solid transparent;
  display:block;
  height:32px;
  line-height:32px;
  margin:10px;
  padding:0;
  padding-left:10px;
}
p:hover {
  border:1px solid dodgerblue;
  border-radius:5px 0 0 5px;
  border-right:0;
  position:relative;
  width:80px;
}
p:hover:before, p:hover:after {
  border-right:1px solid dodgerblue;
  content:'';
  height:100vh;  /** same height like container */
  position:absolute;
  right:-2px;
  width:80px;
  z-index:-1;
}
p:hover:after {
  border-bottom-right-radius:5px;
  transform:translateY(-100%);
}
p:hover:before {
  border-top-right-radius:5px;
  transform:translateY(32px);
}

<div class="container">
  <p>item1</p>
  <p>item2</p>
  <p>item3</p>
  <p class="active">item4</p>
  <p>item5</p>
  <p>item6</p>
  <p>item7</p>
</div>