CSS中的活动页面三角形标记答案

【问题标题】：Active Page Triangle Marker in CSSCSS中的活动页面三角形标记
【发布时间】：2026-01-08 20:00:01
【问题描述】：

我希望创建一个如图所示的活动页面标记。标题可能无法很好地描述我在这里尝试做的事情。

我正在寻找的是具有使用 CSS 的弯曲三角形活动页面标记的边框。

【问题讨论】：

【解决方案1】：

这是一个仅使用<div> 标签的简单解决方案。

设置两个容器的宽度会在不同的地方设置三角形。

body {
  margin:0;
  width: 100%;
}
* {
  box-sizing: border-box;
}
.right {
  float: left;
  border-bottom: 5px solid black;
  width: 50%;
  height: 100px;
  border-radius: 0 0 40px 0;
}
.left {
  float: right;
  border-bottom: 5px solid black;
  width: 50%;
  height: 100px;
  border-radius: 0 0 0 40px;
}

<div class="right"></div>
<div class="left"></div>

【讨论】：

【解决方案2】：

这是一种相对简单的方法，在两个带有底部边框的小divs 上使用单个角边框半径来实现结果 - 要移动“三角形”，您只需要调整 ` 的 left 位置容器'元素。它并不完美，因为边框向指针尖端逐渐消失，但它可能会通过美学测试：

#line {
  border-bottom: 3px solid #888888;
  position: relative;
  width: 500px;
  height: 53px;
}
#container {
  position: absolute;
  bottom: -2px;
  left: 200px;
  width: 100px;
  background: #ffffff;
}
#left,
#right {
  float: left;
  border-bottom: 3px solid #888888;
  height: 50px;
}
#left {
  width: 50px;
  border-radius: 0 0 50% 0;
}
#right {
  width: 50px;
  border-radius: 0 0 0 50%;
}

<div id="line">
  <div id="container">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>

编辑：沙盒中的显示似乎不一致 - 这是FIDDLE

【讨论】：

【解决方案3】：

您可以使用before、after 和border-radius 来实现它。在此处查看示例：http://codepen.io/anon/pen/RNqPpy

【讨论】：