# 現実世界のタグのようなタグの見た目を

**URL:** <https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237>\
**Category:** UX\
**Created:** [2018 年 10 月 23 日午前 7:40 UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237 "2018-10-23T07:40:38Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2018 年 10 月 23 日午後 12:25 UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/2 "2018-10-23T12:25:13Z")

</div>

I was looking to use something similar years ago, you can try to use this and customize it as you wish

```
.discourse-tag.box {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-color: #bfbfbf !important;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  margin: 0 10px 0 0;
}
.discourse-tag.box::before {
  position: absolute;
  content: '';
  background: #fff;
  border-radius: 100%;
  height: 6px;
  left: 10px;
  width: 6px;
  top: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
}
.discourse-tags .discourse-tag.box::after {
  position: absolute;
  content: '';
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #bfbfbf;
  border-top: 14px solid transparent;
  right: 0;
  top: 0;
}
a.discourse-tag.box {
    color: #fff !important;
}

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/c/5c3dbbabe841237b6faf7b88fa83ed90cb509dfe.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/c/ec1a0810028b9dda4f1b120fa9e357285b2e4eac.png)

Almost certainly if you have plugins that add elements to the title, as the voting plugin you will need to make corrections.

---

_[View the full topic](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237)._