Question

我使用CSS边框创建了一个三角形形状，我希望将其固定在视口的底部，而且我还有一个Bootstrap Glyphicon，我希望在CSS三角形内部居中，但我无法弄清楚如何做到这一点。

这是我的代码：

.to-top {
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid black;
  position: fixed;
  bottom: 0;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}
.to-top span {
  font-size: 2em;
  transform: translateX(-50%);
}

<a href="#" class="to-top">
  <span class="glyphicon glyphicon-chevron-up"></span>
</a>

请你帮我解决这个问题。

Answer 1

＆＃13;

.to-top {
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid black;
  position: fixed;
  bottom: 0;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

.to-top span {
  height: 2em;
  font-size: 2em;
  transform: translateX(-50%);
  position: fixed;
}

.to-top span::before {
  position: absolute;
  bottom: .25em;
  left: -.5em
}

＆＃13;

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<body>
<a href="#" class="to-top">
   <span class="glyphicon glyphicon-chevron-up"></span>
</a>

＆＃13;

Answer 2

问题在于Glyphicon Shape不适合其容器盒的整个宽度。它实际上在右侧增加了3个像素，使其不对齐。

我已经更改了一些代码，以便更轻松地使用代码并减少transforms和translates，因为从长远来看它们会让人感到困惑，并且会以奇怪的方式影响位置。

＆＃13;

.to-top {
  position: fixed;
  width: 120px;
  height: 120px;
  bottom: -60px;
  background: black;
  left: calc(50% - 60px);
  transform: rotate(45deg);
}
.to-top span {
  font-size: 2em;
  transform: rotate(-45deg);
  left:3px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="to-top">
  <span class="glyphicon glyphicon-chevron-up"></span>
</a>

＆＃13;

如何将图标置于css形状中？

2 个答案: