Help us understand the problem. What is going on with this article?

CSSでリボン付きラベルを作る。

More than 1 year has passed since last update.

作り方1  (こちらがおすすめ。

label2.png

<div class="label">
  <p class="text">CSS</p>
  <p class="text">World</p>
</div>
.label{
  position: relative;
  display: inline-block;

  font-size: 3em;
  white-space: nowrap;

  /* labelの端の空間を確保する */
  padding: 0 2em;
}

.label .text{
  position: relative;
  display: inline-block;

  padding: .25em 1em;
  border: 1px solid #000;


  color: #FFF;
  background-color: #1E90FF;
  box-sizing: border-box;
}

.label .text:nth-of-type(1){
  border-left: none;
}

.label .text:nth-of-type(2){
  border-right: none;
  /* 幅に合わせて調整が必要 */
  transform: translate(-22%, 45%);
}

/* labelの端デザイン */
.label .text:before{
  content: '';
  position: absolute;
  top: 50%;

  width: 1em; height: 100%;
  border: 1px solid #000;
  border-right: none;
  border-left: none;

  transform: translateY(-50%);
}

.label .text:nth-of-type(1):before{
  right: 99%;

  background-image: 
    linear-gradient( -45deg, #1E90FF 35%, transparent 35%),
    linear-gradient(-135deg, #1E90FF 35%, transparent 35%);

  background-repeat: no-repeat;
}

.label .text:nth-of-type(2):before{
  left: 99%;
  background-image: 
    linear-gradient( 45deg, #1E90FF 35%, transparent 35%),
    linear-gradient(135deg, #1E90FF 35%, transparent 35%);

  background-repeat: no-repeat;
}

/* 奥行き表現 */
.label .text:nth-of-type(2):after{
  content: '';
  position: absolute;
  bottom: 100%; 
  /* 親要素のborder領域分、移動 */
  left: -1px;

  width: 1px; height: 60%;
  background-color: #000;

  transform-origin: left bottom;
  /* 親の大きさによって調整が必要 */
  transform: rotate(40deg);
}

補足

.text:beforeでラベル端(リボン)を作っています。

.textの幅を変えると デザインが崩れるので、調整してください。
親のfont-sizeの弄ってもデザインは崩れません。

奥行き表現

sample.png

※ 分かり易く赤くしています

奥行きは 1本の線を利用して表現しています。
.textの要素の右上と左上を結ぶように線を配置すると良い感じ。

作り方2

label3.png

<div class="label">
  <p class="text">CSS</p>
  <p class="text">World</p>
</div>
.label{
  position: relative;
  display: inline-block;

  font-size: 3em;
  white-space: nowrap;
}

.label .text{
  position: relative;
  display: inline-block;

  padding: .25em 1em;
  border: 1px solid #000;

  color: #FFF;
  background-color: #1E90FF;
  box-sizing: border-box;
}

.label .text:nth-of-type(1){
  border-left: none;
}

.label .text:nth-of-type(2){
  border-right: none;
  /* 幅に合わせて調整が必要 */
  transform: translate(-22%, 45%);
}

/* 奥行き表現 */
.label .text:nth-of-type(2):after{
  content: '';
  position: absolute;
  bottom: 100%; 
  /* 親要素のborder領域分、移動 */
  left: -1px;

  width: 1px; height: 60%;
  background-color: #000;

  transform-origin: left bottom;
  /* 親の大きさによって調整が必要 */
  transform: rotate(40deg);
}

.label .text:nth-of-type(1){
  background:
    /* label端のデザイン */
    linear-gradient( -45deg, dodgerblue  1em, transparent 1em) -2.7em center,
    linear-gradient(-135deg, dodgerblue  1em, transparent 1em) -2.7em center, 
    /* 背景色 */
    linear-gradient( +90deg, transparent 1em, dodgerblue  1em);

  background-repeat: no-repeat;
}

.label .text:nth-of-type(2){
  background:
    /* label端のデザイン */
    linear-gradient( +45deg, dodgerblue  1em, transparent 1em) 3.55em center,
    linear-gradient(+135deg, dodgerblue  1em, transparent 1em) 3.55em center, 
    /* 背景色 */
    linear-gradient( -90deg, transparent 1em, dodgerblue  1em);

  background-repeat: no-repeat;
} 

補足

擬似要素の代わりに.textを使って作ります。
.textを使うためコンテンツ(文字)に影響しやすいです。

疑似要素が余っているので他の目的に利用できます。

幅を変えるとラベル端(リボン)がズレるので位置調整が必要。
作り方1に比べて調整箇所が多くなっています。

※その他は同じなので省略します。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away