Blocksy 2 Single Posts Custom Tag Design

blc-2-single-posts-custom-tag-design.css

.entry-tags > a {
  --price-tag-height: 25px;
  --price-border-radius: 4px;
  position: relative;
  display: inline-flex;
  height: var(--price-tag-height);
  margin-left: calc(var(--price-tag-height) / 2);
  padding: 0 calc(var(--price-tag-height) / 2);
  color: #fff;
  border-radius: 0 var(--price-border-radius) var(--price-border-radius) 0;
  background-color: var(--theme-palette-color-3);
  line-height: var(--price-tag-height);
	box-shadow: none !important;
}

.entry-tags > a::before {
  --triangle-width: calc(var(--price-tag-height) * 0.7071);
  left: calc(var(--triangle-width) / -2);
  top: calc(var(--triangle-width) * 0.21);
  width: var(--triangle-width);
  height: var(--triangle-width);
  transform: rotate(45deg);
  border-radius: 0 0 0 var(--price-border-radius);
  background-color: inherit;
}
.entry-tags > a::before,
.entry-tags > a:hover::before {
	display: block;
	opacity: 1;  
	filter: none;
}

.entry-tags > a::after {
  --circle-diameter: calc(var(--price-border-radius) * 1.5);
  position: absolute;
  content: "";
  z-index: 1;
  top: 50%;
  left: calc(var(--price-tag-height) / -6);
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  transform: translateY(-50%);
  border-radius: var(--circle-diameter);
  background: #fff;
}