--------------
●ここに注意!
--------------
↑などを表記するとき、画像をはりつけるのは面倒なのでCSSで行う。
出来上がりイメージはこちら
↓↓↓↓↓↓
CSS/HTMLは以下。
.header1-1{
height:40px;
}
.header1-1:before {
content: "";
margin-right:5px;
display: inline-block;
border: 5px solid transparent;
background: #337AB7;
border-radius: 5px;
}
.header1-2{
height:40px;
}
.header1-2:before {
content: "";
margin-right:3px;
display: inline-block;
border: 8px solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: red;
}
.header1-3{
height:40px;
}
.header1-3:before {
content: "";
margin-right:5px;
display: inline-block;
border: 7px solid;
border-top-color: transparent;
border-right-color: #66CC22;
border-bottom-color: transparent;
border-left-color: #CC2266;
background: #337AB7;
border-radius: 7px;
}
.header1-4{
height:40px;
}
.header1-4:before {
content: "";
margin-right:5px;
display: inline-block;
border: 7px solid transparent;
background: #337AB7;
}
.header1-5{
height:40px;
}
.header1-5:before {
content: "";
margin-right:5px;
display: inline-block;
border: 7px solid transparent;
background: #337AB7;
border-radius: 3px;
}
.header1-7{
width:22px;
color:blue;
display: inline-block;
border: 1px solid black;
background: pink;
border-radius: 10px;
}
<div class="header1-1">前に○をつけてみます。</div>
<div class="header1-2">前に△をつけてみます。</div>
<div class="header1-3">組み合わせるとおかしなものもできあがった。</div>
<div class="header1-4">シンプルな□はこれ</div>
<div class="header1-5">○の角度を変えると□っぽく</div>
やりながら思ったけど①などもCSSで実装できる → <div class="header1-7" >a</div>