Html 有没有办法在Twitter上重现CSS的狗耳效果？

当你在推特上转发或收藏时，包含推特的div角落会出现一个带图标的彩色小三角形。我从Twitter上复制了CSS和sprite表单，并试图在我的网站上重新创建它，但它并没有完全按照计划进行（三角形根本没有使用完全相同的CSS）。那么，我该如何在我的网站上的div角落添加三角形的“狗耳朵”效果呢

这是我从Twitter上复制的代码：

.dogear {
  position:absolute;
  top:0;
  right:0;
  display:none;
  width:24px;
  height:24px;
}

.retweeted .dogear {
  background-position:0 -450px;
}

.favorited .dogear {
  background-position:-30px -450px;
}

.retweeted.favorited .dogear {
  background-position:-60px -450px;
}

.retweeted .dogear,.favorited .dogear,.retweeted.favorited .dogear{
  display:block;
}

i {
  background-image: url("../sprite.png") !important;
  display: inline-block;
  vertical-align: text-top;
  background-image: url("../sprite.png");
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

并使用以下命令插入到HTML中：

<i class="dogear"></i>

我更改了sprite表URI，我打算更改类名，并添加一些，使其不完全相同。有可能使这种效果起作用吗

---

谢谢：）

您需要向包含狗耳朵的元素添加一个更大的

z-index

属性，以便它显示在您希望它重叠的元素的顶部

z-index

用于控制绝对、相对或固定位置元素的堆栈顺序

您可以在

z-index

上阅读更多信息

---

此外，您使用的是

dogear

类，与我从您粘贴的代码中可以看出的内容是分离的。如果查看样式表中的类定义，会被告知不要显示：

display:none

您需要向包含狗耳的元素添加一个更大的

z-index

属性，以便它显示在您希望它重叠的元素的顶部

z-index

用于控制绝对、相对或固定位置元素的堆栈顺序

您可以在

z-index

上阅读更多信息

此外，您使用的是

dogear

类，与我从您粘贴的代码中可以看出的内容是分离的。如果查看样式表中的类定义，会被告知不要显示：

display:none