【コピペでOK】CSSだけで三角や四角を描写

cssだけで三角や四角を描写する、中級者向けのテクニック。

この、要素にposition:relativeを付けてbeforeとafterを使う手法は色んな描写に応用できますよね。

色や大きさは任意ですので、自由に変更してください。

/*下向き三角*/

p{

position:relative;

}

p:before{

content: "";

width: 0;

height: 0;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

border-top: 30px solid #000;

}

/*頭に四角*/

p{

position:relative;

}

p:before{

width: 35px;

height: 35px;

background-color: #003755;

display: inline-block;

position: absolute;

left: 0;

top: 0;

text-align: center;

content: "";

}