Question

我无法按照我的意愿将三角形显示出来。我想让以下片段为左边的三角形，而不是倾斜135度的正方形。非常感谢帮助！

/*
Like Count Box
*/
.like-count {
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    padding: 3px 7px;
    font-size: 12px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
    width: 60px;
    background-color: inherit;
    border: 1px solid #fff;
    padding: 4px;
    position: relative;
}
.like-count:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 5px;
    left:-7px;
    width: 10px;
    height: 10px;
    background: #fff;
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
}

Answer 1

您可以使用其边框制作三角形，而不是旋转伪。

＆＃13;

/*
Like Count Box
*/

.like-count {
  white-space: nowrap;
  text-align: center;
  padding: 3px 7px;
  font-size: 12px;
  vertical-align: middle;
  display: inline-block;
  margin-left: 10px;
  width: 60px;
  background-color: inherit;
  border: 1px solid #000;
  padding: 4px;
  position: relative;
}

.like-count:after {
  content: '';
  position: absolute;
  top: -1px;
  left: -11px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid black;
}

＆＃13;

<br><br>
<div align="center">
  <div class="like-count">33</div>
</div>

＆＃13;

CSS框三角形左边

1 个答案: