>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

コピペで!CSSのみで三角▲や矢印→を作る

CSS
この記事は約8分で読めます。

はじめに

三角や矢印を作るCSSを簡単にコピペで使えるよう、向きごとのコードを一覧にしています。

 

実現方法について

透明にする

transparent(トランスペアレント)を使って要素を透明にする事で簡単に実現できます。

transparent

 

transparentは、設定されている背景色を無効にしたい場合にも使います。

background-color: transparent;

 

回転させる

transform: rotate を使って回転させます。

transform: rotate

 

三角を作るCSS

HTMLサンプル

<div class=”up01“></div>

それぞれの向きに設定するクラス名の<div>タグで。

 

CSSサンプル

サンプル コード
コードを表示
.up01{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #ff3e9e ;
}
右上
コードを表示
.right_up{
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 40px 0;
border-color: transparent #ff3e9e transparent transparent;
}
コードを表示
.right01{
width: 0;
height: 0;
border-left: 30px solid #ff3e9e;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
右下
コードを表示
.right_down{
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent transparent #ff3e9e transparent;
}
コードを表示
.down01{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ff3e9e;
}
左下
コードを表示
.left_down{
width: 0;
height: 0;
border-style: solid;
border-width: 40px 0 0 40px;
border-color: transparent transparent transparent #ff3e9e;
}
コードを表示
.left01{
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid #ff3e9e;
border-bottom: 30px solid transparent;
}
左上
コードを表示
.left_up{
width: 0;
height: 0;
border-style: solid;
border-width: 40px 40px 0 0;
border-color: #ff3e9e transparent transparent transparent;
}

 

応用サンプル

CSSサンプル

サンプル コード
コードを表示
.sample1 {
  border: 20px solid;
  border-color: #ff9eff #ffce9e #9e9eff #9effff;
  height: 100px;
  width: 100px;
  margin: 1rem auto;
}
コードを表示
.sample2 {
  border: 50px solid;
  border-color: #ff9eff #ffce9e #9e9eff #9effff;
  height: 0px;
  width: 0px;
  margin: 1rem auto;
}
見出しなどに
コードを表示
.sample3 {
  padding: 1rem 3rem;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  position: relative;
  display: inline-block;
  height: 50px;
  font-size:20px;
  color: #fff;
  background: #ff3e9e;
}
リボン風
コードを表示
.sample4 {
  line-height: 60px;
  position: relative;
  height: 60px;
  margin: 2em 40px 1em;
  padding: 0 2rem;
  text-align: center;
  font-size:20px;
  color: #fff;
  background: #ff3e9e;
}
.sample4:before,.sample4:after {
  position: absolute;
  top: 0;
  display: block;
  height: 50px;
  content: '';
  border: 30px solid #ff3e9e;
}
.sample4:before {
  left: -40px;
  border-left-width: 15px;
  border-left-color: transparent;
}
.sample4:after {
  right: -40px;
  border-right-width: 15px;
  border-right-color: transparent;
}
吹き出し風
コードを表示
.sample5 {
  position: relative;
  padding: 1.5rem 2rem;
  font-size:20px;
  color: #fff;
  border-radius: 10px;
  background: #ff3e9e;
}
.sample5:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #ff3e9e transparent transparent transparent;
}

 

 

矢印を作るCSS

HTMLサンプル

<div class=”up02“></div>

それぞれの向きに設定するクラス名の<div>タグで。

 

CSSサンプル

サンプル コード
コードを表示
.up02{
width: 30px;
height: 30px;
border: 5px solid;
border-color: #555 #555 transparent transparent;
transform: rotate(-45deg);
}
コードを表示
.right02{
width: 30px;
height: 30px;
border: 5px solid;
border-color: #555 #555 transparent transparent;
transform: rotate(45deg);
}
コードを表示
.left02{
width: 30px;
height: 30px;
border: 5px solid;
border-color:  transparent transparent #555 #555;
transform: rotate(45deg);
}
コードを表示
.down02{
width: 30px;
height: 30px;
border: 5px solid;
border-color:  transparent transparent #555 #555;
transform: rotate(-45deg);
}

 

 

コメント

タイトルとURLをコピーしました