是什么

使用border画出三角形、正方形

• 边框无限大
• 内容无限小

理解border

<style>
    p{
      box-sizing: border-box;
    }
    .sanjiao{
      width: 100px;
      height: 100px;
      border-width: 20px;
      border-style:solid;
      border-color: #96ceb4 #ffeead #d9534f #ffad60;
    }
  </style>
  <p class="sanjiao"></p>

三角形

实心三角形

<!-- 实心三角形 -->
<style>
    .sanjiao2{
      width: 0;
      height: 0;
      border-width: 50px;
      border-style:solid;
      border-color: transparent transparent #ffad60 transparent ;
    }
  </style>
  
  <p class="sanjiao2"></p>

空心三角形

• 先画一个大实心三角形
• 再用伪类画一个小实心三角形
• 利用绝对定位调整位置
• 伪类三角形设置背景为白色

<!-- 空心三角形 -->
  <style>
    .sanjiao3{
      position: relative;
      width: 0;
      height: 0;
      border-width: 0 50px 50px;
      border-style:solid;
      border-color: transparent transparent #ffad60 transparent ;
    }
    .sanjiao3::after{
      content: '';
      border-width: 0 40px 40px;
      border-style:solid;
      border-color:transparent transparent #fff; ;
      position: absolute;
      left: -40px;
      top: 6px;
    }
  </style>
  <p class="sanjiao3"></p>

正方形

• padding : padding相对于父元素宽度
• after+padding：: padding相对于父元素宽度+伪类撑起
• vw/vh(兼容性不太好)

padding

<style>
    .zhengfang2{
      width: 100%;
      padding-bottom: 100%;
      background-color: #96ceb4;
    }
  </style>
  <p class="zhengfang2"></p>

after+padding

<style>
    .zhengfang3{
      width: 100%;
      background-color: #96ceb4;
    }
    .zhengfang3::after{
      content: '';
      padding-top: 100%;
      display: block;
    }
  </style>
  <p class="zhengfang3"></p>

vw/vh

<style>
    .zhengfang1{
      width: 100%;
      height: 100vw;
      background-color: #96ceb4;
    }
  </style>
  <p class="zhengfang1"></p>