タグクラウドをCSSのみでお洒落なデザインにする方法

2020/04/17

タグクラウドを、画像を使わずにCSSのみで、お洒落なデザインにする方法です。

DEMO

HTML

Tag Cloud

  HTML
  CSS
  jQuery
  WordPress
  HTML5
  CSS3
  JavaScript
  PHP
  Photoshop
  Illustrator

タグクラウドは、リストで構成されています。

CSS

h2 {
  color: #777;
}

.tag {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  padding: 10px;
  width: 300px;
}

.tag li {
  background: #F58E7E;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: 0 10px 5px 5px;
  padding: 0 10px;
  position: relative;
}

.tag li:before {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #F58E7E;
  content: '';
  display: block;
  margin-left: -15px;
  position: absolute;
  left: 0;
}

.tag li:after {
  background: #fff;
  border-radius: 50%;
  content: '';
  display: block;
  height: 4px;
  line-height: 30px;
  position: absolute;
  top: 13px;
  left: 0px;
  width: 4px;
}

ポイント

.tag liを基準に、三角の部分である.tag li:beforeを左端から-15pxの位置に絶対配置しています。

.tag li:before {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #F58E7E;
  content: '';
  display: block;
  height: 0;
  margin-left: -15px;
  position: absolute;
  left: 0;
  width: 0;
}

三角形はborderで作られており、下記のような仕組みです。

今回は右側の三角のみを使うため、上下の三角をtransparentで透明にし、margin-left: -15px;で右側の三角を自身の幅分だけ移動させています。

.tag li:afterは穴の部分です。垂直方向の中心となるように、(30/2)-(4/2)で、top:13px;の位置に絶対配置しています。

.tag li:after {
  background: #fff;
  border-radius: 50%;
  content: '';
  display: block;
  height: 4px;
  line-height: 30px;
  position: absolute;
  top: 13px;
  left: 0px;
  width: 4px;
}

以上で、タグクラウドをCSSのみでお洒落なデザインにする方法を終わります。

2023/05/23