【コピペでOK】CSSだけで三角や四角を描写
2019.07.30 15:00
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: "";
}