CSS实现圆角三角形、多边形

实现方法肯定有很多，今天也是有幸看到一篇文章，很不错，所以借鉴下顺便实现下，用css实现有趣的图案 原文地址：CSS 奇思妙想 | 巧妙的实现带圆角的三角形

<div class="tra">
      <div class="trangle"></div>
      <div class="trangle"></div>
      <div class="trangle"></div>
    </div>
    <div class="tra1">
      <div class="trangle1"></div>
      <div class="trangle1"></div>
      <div class="trangle1"></div>
</div>

.tra {
    width: 150px;
    height: 150px;
    margin-left: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .trangle {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: rgb(22, 226, 56);
    border-top-right-radius: 40px;
    border-bottom-left-radius: 100%;
  }

  .trangle:hover {
    cursor: pointer;
  }
  .trangle1:hover {
    cursor: pointer;
  }
  .tra :first-child {
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
  }
  .tra :nth-child(2) {
    transform: rotate(60deg) skewX(-30deg) scale(1, 0.866);
  }
  .tra :nth-child(3) {
    transform: rotate(-180deg) skewX(-30deg) scale(1, 0.866);
  }
  .tra1 {
    width: 150px;
    height: 150px;
    margin-left: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .trangle1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background: repeating-linear-gradient(
      45deg,
      rgb(126 165 133),
      transparent 100px
    );
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
  }
  .tra1 :first-child {
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
  }
  .tra1 :nth-child(2) {
    transform: rotate(60deg) skewX(-30deg) scale(1, 0.866);
  }
  .tra1 :nth-child(3) {
    transform: rotate(-180deg) skewX(-30deg) scale(1, 0.866);
  }