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）底部创建一个框。使用这两个框，您可以更改边框的方向。以下显示了一个基于元素（Code on JSFiddle）的动态长度示例：

请参阅以下解决方案（编辑前的原始答案）：

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

您想在页面的整个高度上设置垂直边框。这是一件非常困难的事情，但您可以使用以下解决方案，使用隐藏溢出的容器（太长的边框）（Code on JSFiddle）：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

另一个可能有用的示例，使用:hover代替.active来设置活动元素。这对于测试也很有用（Code on JSFiddle）：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用:after和:before伪元素并添加border-radius。

.active {
  padding: 15px;
  margin: 60px;
  border: 1px solid blue;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-right: 0;
  display: inline-block;
  border-right: none;
  position: relative;
}
.active:before,
.active:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 40px;
}
.active:before {
  border-right: 1px solid blue;
  border-bottom: 1px solid blue;
  border-bottom-right-radius: 50%;
  right: -30px;
  top: 0;
  transform: translateY(-100%);
}
.active:after {
  border-right: 1px solid blue;
  border-top: 1px solid blue;
  border-top-right-radius: 50%;
  right: -30px;
  bottom: 0;
  transform: translateY(100%);
}

<div class="active">Some selection</div>

Answer 3

使用// ##### START BOILERPLATE ###### var db; var databaseName = 'database'; var objectStoreName = 'store1'; var req = indexedDB.open(databaseName); req.onupgradeneeded = function() { db = req.result; db.createObjectStore(objectStoreName); }; req.onsuccess = function() { db = req.result; main(); } // ##### END BOILERPLATE ###### var control; function main() { var txn = db.transaction([objectStoreName], 'readonly']; control = txn.observe(observerFunction); txn.oncomplete = function() { console.log('Observing is starting!'); } } function observerFunction(changes) { console.log('Observer received changes!'); // An object store that we're observing has changed. changes.records.forEach(function(records, objectStoreName) { console.log('Got changes for object store: ', objectStoreName); records.forEach(function(change) { // do something with change.type and change.key var type = change.type; switch (type) { case 'clear': console.log('object store cleared.'); break; case 'add': console.log('key "', change.key, '" added.'); break; case 'put': console.log('key "', change.key, '" putted.'); break; case 'delete': console.log('key or range "', change.key, '" deleted.'); break; } }); }); }元素作为曲线而不是span

的另一个选项

fiddle

pseudoelements

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.active {
  border: 1px solid red;
  border-right: 0;
  width: 80px;
  height: 32px;
  position: relative;
  border-radius: 5px 0 0 5px;
  display: flex;
  align-items: center;
  padding-left: 1em;
}

.curvy {
  flex: 1;
  width: 80px;
  margin-left: 30px;
  border: 1px solid red;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 5px 0;
  margin-bottom: -1px;
}

.active+.curvy {
  margin-bottom: 0;
  margin-top: -1px;
  border-top: 1px solid red;
  border-radius: 0 5px 0 0;
  border-bottom: 0;
}

Answer 4

虽然其他两个有效，但并不是一直有效。下。要使线条更长/更短，请更改高度和高度。最高价值。

height: 50vh;

top: calc(-50vh - 1px);

＆＃13;

.active{
    border:1px solid red;
    border-right:0;
    width:80px;
    height:32px;
    margin: 150px auto 0;
    position:relative;
    border-radius: 10px 0px 0 10px;
    padding: 10px;
}
.active:after,
.active:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50vh;
}
.active:before {
  top: calc(-50vh - 1px);
  right: -20px;
  border-bottom-right-radius: 10px;
  border: 1px solid red;
  border-left: none;
  border-top: none;
}
.active:after{
  bottom: calc(-50vh - 1px);
  right: -20px;
  border-top-right-radius: 10px;
  border: 1px solid red;
  border-left: none;
  border-bottom: none;
}

＆＃13;

<div class="active">hi</div>

＆＃13;

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

4 个答案: