ショコラ
CSS ポイントのある項目を表示するには?
デザイナーに注文した時にこのような表示がありました。どうやっているのか調べてみました。
もっさん先輩
<!DOCTYPE html>
<html>
<body>
<style>
h3:before
{
content:"";
position:absolute;
top:100%;
left:20px;
border:solid transparent;
border-top-color:#d9d8d8;
border-width:13px;
}
h3:after
{
content:"";
position:absolute;
top:100%;
left:20px;
margin-left:1px;
border:solid transparent;
border-top-color:#FFF;
border-width:12px;
}
</style>
<div style="border: 1px solid #d9d8d8; border-radius:30px;">
<div style="position:relative; border-bottom: 1px solid #d9d8d8; padding-left:20px;">
<h3>項目</h3>
</div>
<div style="padding:20px;">
アイテム
</div>
</div>
</body>
</html>
以上