【CSS】レスポンシブ対応の下向き三角形の作り方

指定した親要素の幅（%）に比例してサイズが変わる%指定の下向き三角形の作り方です。
「border-width」は%が指定できず、背景にSVG画像を指定する方法だと、複数の%パターンに対応できなかったので、「clip-path」を使用しシンプルにできました。

HTML

<div class="container">
    <div class="block">
      <p>100%</p>      
    </div>
    <div class="block wid50">
      <p>50%</p>     
    </div>
</div>

 

CSS

.container {
  max-width: 500px;
  margin: 0 auto;
}

.block {
  margin: 0 auto 60px;
}

.block p {
  margin: 0;
  padding: 1em 0;
  background-color: #f1c40f;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.block::after {
content: '';
display: block;
background-color: #f1c40f;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
width: 100%;
height: 50px;
}

.wid100 {
  width: 100%;
}

.wid50 {
  width: 80%;
}

 

• WEB
• Tips