The CSS implements rounded triangles and polygons

There must be a lot of implementation methods, today is also lucky to see an article, very good, so learn from the way to achieve, with CSS to achieve interesting patterns

The original address: CSS ideas | clever implementation of a triangle with rounded corners

<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>
Copy the code

.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);
  }
Copy the code