如何增加CSS图像元素的垂直大小而不更改其他任何内容

Question

我有一个使用CSS构建的标记图像我已经在网络上找到了（因为我不是CSS专家，并且有点蠢蠢欲动）。我想让标签更加“厚实”，并且已经接近完美。您会注意到标签的背景（深红色）与钻石形状的底角没有对齐。如果我只是增加尺寸，那么会导致其他地方不对齐。这是我目前的形象：

期望的结果应如下所示：

这是我的CSS：

.tags {
  a {
    color: #fff;
    &:visited {
      color: #fff;
    }
    &:hover {
      color: #fff;
      background-color: #e94016;
    }
  }
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: relative;
  content: "";
  cursor: pointer;
  margin: 10px 25px 10px 15px;
  padding: 3px 28px 3px 20px;
  border: none;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font: normal 14px/16px "Antic", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center;
  text-transform: uppercase;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: #b23111;
  -webkit-box-shadow: 0 6px 0 0 #e94016 , 2px 6px 0 1px #e94016 ;
  box-shadow: 0 6px 0 0 #e94016 , 2px 6px 0 1px #e94016 ;
}

.tags::before {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 1;
  width: 19px;
  height: 19px;
  position: absolute;
  content: "";
  cursor: pointer;
  top: 2px;
  right: -4px;
  border: none;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font: normal 0/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #b23111;
  -webkit-box-shadow: 0 6px 0 0 #e94016 ;
  box-shadow: 0 6px 0 0 #e94016 ;
  text-shadow: none;
  -webkit-transform: rotateY(1deg) rotateZ(-45deg)   ;
  transform: rotateY(1deg) rotateZ(-45deg)   ;
}

.tags::after {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 2;
  width: 10px;
  height: 10px;
  position: absolute;
  content: "";
  cursor: pointer;
  top: 7px;
  right: 2px;
  border: none;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal medium/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #fcfcfc;
  -webkit-box-shadow: 3px 3px 0 0 #e94016 inset;
  box-shadow: 3px 3px 0 0 #e94016 inset;
  text-shadow: none;
}

html是：

<li class="tags"><a href="#" data-original-title="" title="">9500XL,</a></li>

Answer 1

您可以使用a:before作为以下影子。

Stack Snippet

＆＃13;

＆＃13;

.tags a {
  color: #fff;
}

.tags a:hover {
  color: #fff;
  background-color: #e94016;
}

.tags {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: relative;
  content: "";
  cursor: pointer;
  margin: 10px 25px 10px 15px;
  padding: 3px 28px 3px 20px;
  border: none;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font: normal 14px/16px "Antic", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  text-transform: uppercase;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: #b23111;
  -webkit-box-shadow: 0 6px 0 0 #e94016;
  box-shadow: 0 6px 0 0 #e94016;
}

.tags::before {
  display: inline-block;
  z-index: 1;
  width: 18px;
  height: 18px;
  position: absolute;
  content: "";
  top: 2px;
  right: -4px;
  border-radius: 5px;
  background: #b23211;
  transform: rotate(45deg);
}

.tags a::before {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 2;
  width: 10px;
  height: 10px;
  position: absolute;
  content: "";
  cursor: pointer;
  top: 7px;
  right: 2px;
  border: none;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal medium/normal Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #fcfcfc;
  -webkit-box-shadow: 3px 3px 0 0 #e94016 inset;
  box-shadow: 3px 3px 0 0 #e94016 inset;
  text-shadow: none;
}

.tags::after {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  content: "";
  top: 8px;
  right: -4px;
  border-radius: 5px;
  background: #e94017;
  transform: rotate(45deg);
  z-index: -1;
}

＆＃13;

<li class="tags"><a href="#" data-original-title="" title="">9500XL,</a></li>

＆＃13;

＆＃13;

＆＃13;