はじめに
三角や矢印を作るCSSを簡単にコピペで使えるよう、向きごとのコードを一覧にしています。
実現方法について
透明にする
transparent（トランスペアレント）を使って要素を透明にする事で簡単に実現できます。
transparentは、設定されている背景色を無効にしたい場合にも使います。
background-color: transparent;
回転させる
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);
}
|
コメント