<div></div>
<div></div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --w: 30vh;
  --h: 30vh;
}

div {
  background: #f36;
  margin: 5vh;
  
  width: var(--w);
  height: var(--h);
  
  clip-path: polygon(
    50% 0,
    100% 100%,
    0 100%
  );
  
  &:nth-child(2) {
    --w: 60vh;
    clip-path: polygon(
      calc(var(--w) / 2) 0,
      var(--w) var(--h),
      0 var(--h)
    )
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.