css - 如何在 CSS 中实现这种按钮？

Question

我已经在互联网上搜索了一段时间，但一无所获，所以我求助于你们。

我想知道如何使用 CSS 制作这样的按钮(开/关按钮示例):

我已经尝试过这样的事情了:

HTML:

                <a class="button_tooltip" href="#">On</a>
                <a class="button_tooltip" href="#">Off</a>

CSS:

a {
    color: #76daff;
    display: inline-block;
    padding: 8px 16px;
    position: relative;
    text-decoration: none;
}
a {
    color: #76daff;
}
a.button_tooltip {
    background: #ccc none repeat scroll 0 0;
    color: black;
}
a.button_tooltip::after {
    border-top-color: #cccccc;
}
a.button_tooltip::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ccc;
    content: "";
    margin-left: -8px;
}
a.button_tooltip {
    background: #cccccc none repeat scroll 0 0;
    color: #000000;
}
a.button_tooltip::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ccc;
    content: "";
}
a.button_tooltip::after {
    border-top-color: #cccccc;
}

但只给了我下面没有小三 Angular 形的正方形。

Answer 1

这很容易通过 2 个元素并使用伪元素来显示下方的箭头位来实现。

它不需要大量的 HTML/CSS 即可完成，并且可以很容易地更改为输入或 <a>。标签。无论您有什么要求。

$(document).ready(function() {
  $('.btn').click(function() {
    $('.btn').toggleClass('active');
  });
});

.container {
  width: 200px;
  height: 100px;
}
.btn {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid blue;
  float: left;
  cursor: pointer;
}
.active {
  background: blue;
  position: relative;
}
.active:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  bottom: -10px;
  left: 25px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn"></div>
  <div class="btn active"></div>
</div>