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

CSS 三角形ロゴをつくる。

More than 3 years have passed since last update.

sample2.gif

html

<div class="triangle" data-text="Hello World!">
   <div>
     <div>
       <div></div>
     </div>
   </div>
</div>

CSS

.triangle{
  position: relative;

  width: 200px;
  height: 200px;
}

.triangle div{
  position: absolute;
  left: 100%;

  width: 100%;
  height: 2px;

  box-shadow: 0 0 0 2px dodgerblue;

  transform-origin: left center;
  transform: rotate(-120deg);

  z-index: 1;
}

/* 三角形が上向きなら bottom: 0; 下向きなら top: 0;を指定 */
.triangle > div{
  bottom: 0; right: 0;
}

/* テキスト */
.triangle:before{
  content: attr(data-text);
  position: absolute;
  top: 50%; left: 50%;

  display: inline-block;
  font-size: 2em;
  white-space: nowrap;

  background-color: white;
  /* font-size や 三角形の向きによって調整が必要 */
  transform: translate(-50%,0);

  z-index: 2;
}

/* hover animation */
.triangle div{
  transition: 3s;
}

.triangle:hover div{
   box-shadow: 200vh 0 0 2px dodgerblue;
}

解説

三角形の作り方

1, div を 階層構造にする

2, div を 水平に並べる
(.triangleの直下の要素は right: 0;と指定する)

sample1.png

triangle div{
  position: absolute;
  left: 100%;
}


/* 三角形が上向きなら bottom: 0; 下向きなら top: 0;を指定 */
triangle > div{
  bottom: 0; right: 0;
}

3, div に 角度をつける

/* 上向きはマイナス方向に回転、下向きはプラス方向に回転 */
triangle div{
  position: absolute;
  left: 100%;

  transform-origin: left center;
  transform: rotate(-120deg);
}

triangle > div{
 bottom: 0; right: 0;
}

角度を指定したら完成。


アニメーション

box-shadowを 画面外に移動させるだけ

Why not register and get more from Qiita?
  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