CSS ポイントのある項目を表示するには？

/ CSS / By
ショコラ
ショコラ

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>

以上

Scroll to Top