三角形、矢印、吹き出しをcssだけで作る方法【コードをコピーして使い回せます】

三角形、矢印、吹き出しをcssだけで作る方法【コードをコピーして使い回せます】

このページでは、CSSだけで作る三角形、矢印、吹き出しなどのコードサンプルを紹介します。

サンプルイメージとCSSコード

右向きの矢印

矢印

◆HTML
<p>矢印<span class="sample_arrow_right"></span></p>

◆CSS
.sample_arrow_right,
.sample_arrow_right span{
display: inline-flex;
align-items: center;
}
.sample_arrow_right span:before{
content: "";
width: 25px;
border-top: 1px solid #669bed;
display: inline-block;
}
.sample_arrow_right span:after{
content: "";
border-left: 15px solid #669bed;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
display: inline-block;
}

右向きの三角形

矢印

◆HTML
<p class="sample_triangle_right">三角形</p>

◆CSS
.sample_triangle_right{
display: flex;
align-items: center;
}
.sample_triangle_right:after{
content: "";
border-left: 15px solid #669bed;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
display: inline-block;
}

下向きの矢印(三角形)

矢印

◆HTML
<p class="sample_arrow_bottom">矢印</p>

◆CSS
.sample_arrow_bottom{
position: relative;
}
.sample_arrow_bottom:after{
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
border-top: 30px solid #f3a8f8;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
}

鋭利な形の三角形

矢印

◆HTML
<p class="sample_arrow_bottom_eiri">矢印</p>

◆CSS
.sample_arrow_bottom_eiri{
position: relative;
}
.sample_arrow_bottom_eiri:before{
content: "";
position: absolute;
top: 3px;
right: 0;
left: 0;
margin: auto;
border-top: 20px solid #fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
z-index: 1;
}
.sample_arrow_bottom_eiri:after{
content: "";
position: absolute;
top: 3px;
right: 0;
left: 0;
margin: auto;
border-top: 40px solid #ff7777;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
z-index: 0;
}

吹き出し風の三角形

吹き出し内のメッセージです。

◆HTML
<p class="sanmple_fukidashi">吹き出し内のメッセージです。</p>

◆CSS
.sanmple_fukidashi{
position:relative;
margin-bottom: 3rem;
border: solid 1px #8cfc90;
border-radius: 7px;
padding: 10px 20px;
display: inline-block;
margin-left: 20px;
}
.sanmple_fukidashi:before{
content: "";
position: absolute;
top: 10px;
left: -20px;
margin: auto;
border-right: 10px solid #8cfc90;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
width: 20px;
}
.sanmple_fukidashi:after{
content: "";
position: absolute;
top: 10px;
left: -18px;
margin: auto;
border-right: 10px solid #fff;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
width: 20px;
}

Category: Webサイト作成Tags: css

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

seventeen + nine =