带三角形的响应按钮答案

【问题标题】：Responsive button with triangle带三角形的响应按钮
【发布时间】：2014-08-14 23:30:18
【问题描述】：

我在 Bootstrap 容器中放置了一个垂直菜单，其中包含两种类型的按钮

按钮末尾有一个 CSS 三角形（放置在 :after 上）（红色）
放置在
（绿色的）

问题：

页面的排版依赖于相对单位 rem。随着视口的扩大，按钮内部的字体大小和内边距也会增加。 这会导致三角形大小及其位置出现问题。
所有菜单项必须在右侧相互对齐。但是第一个按钮的三角形使用负边距放置，所以它重叠。

这是一个例子： http://www.bootply.com/k3dPxTZYTs#

如何解决这些问题？

HTML：

<div class="container">
    <div> 
      <a href="#" class="btn-switch">
        Lorem Ipsum 

      </a>
    </div>

  <ul>
    <a href="#"><li>Option A </li></a>
    <a href="#"><li>Option B </li></a>
    <a href="#"><li>Option C </li></a>
  </ul>

</div>

CSS（涉及响应式排版的完整 CSS 可以在 BootPly 示例中找到）：

.btn-switch {
  background: #f00;
  border-bottom: 2px solid #A00;
  padding: 0.7rem 1rem;
  margin-bottom: 10px;
  display: block;
  position: relative;
  color: #fff;
}

.btn-switch:after {
  content: "";
  width: 0px;
  height: 0px;
  border-width: 1.4rem 0px 1.4rem 1.4rem;
  border-color: transparent transparent transparent #f00;
  border-style: solid;
  position: absolute;
  top: 50%;
  right: -1.4rem;
  margin-top: -1.4rem;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
li {
  background: #0f0;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #0a0;
  color: #fff;
}

【问题讨论】：

标签： css html responsive-design

【解决方案1】：

首先我建议你使用 box-sizin

*, *:after, *:before {
  box-sizing:border-box;
}

您可以使用 CSS calc，您可以在其中计算元素与其他单位混合百分比的长度，在您的情况下，介于百分比和 rem 之间

代码是……希望对你有帮助

.btn-switch {
  background: #f00;
  border-bottom: 2px solid #A00;
  padding: 0.7rem 1rem;
  margin-bottom: 10px;
  display: block;
  position: relative;
  color: #fff;
  width: calc(100% - 1.4rem);
}

.btn-switch:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border-width: 1.4rem 0px 1.4rem 1.4rem;
  border-color: transparent transparent transparent #f00;
  border-style: solid;
  top: 0;
  bottom: 0;
  right: -1.4rem;
}

DEMO

【讨论】：