HTML / CSS

レスポンシブ対応した三角形

「border-width」

レスポンシブ対応した三角形は「border-width」に「vw」を指定する

・CSS Triangle Generator　ジェネレーター

横幅1000px以下になったら、縮小させるよう実装

親要素が縮むにつれて、比例して三角形が縮小していく

このように「%」指定ではなく、「vw」指定をすればレスポンシブ対応した三角形が実装できる

html

CSS

                  
.triangle {
  display: block;
  margin-inline: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 180px 0px 180px;
  border-color: #aaaaaa transparent transparent transparent;
}
@media screen and (max-width: 1000px) {
  .triangle {
    border-width: 9vw 18.5vw 0px 18.5vw;
  }

「clip-path」

「clip-path」を指定して作成

・CSS clip-path maker　ジェネレーター

・Webspe Tools　ジェネレーター

「padding-top」を「%指定」することで親要素に比例して縮小する高さを指定。

「clip-path」だと、色をグラデーションにできる

html

                  

  ・単色
  



  ・グラデーション

CSS

                  
.triangle01 {
  max-width: 768px;
  width: 100%;
  padding-top: 9%;
  margin-inline: auto;
  background: #aaaaaa;
  /*clip-path: polygon(0 0, 100% 0%, 50% 100%);*/
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
@media screen and (max-width: 768px) {
  .triangle01 {
    max-width: 768px;
  }
}

.triangle02 {
  max-width: 768px;
  width: 100%;
  padding-top: 9%;
  margin-inline: auto;
  background: #aaaaaa;
  background: linear-gradient(0deg, #333333 0%, #cccccc 100%);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
@media screen and (max-width: 768px) {
  .triangle02 {
    max-width: 768px;
  }
}