不規則なグラフィックスを描画する方法のクリップパスとリニアグラデーション

不規則なグラフィックスは、background プロパティのグラデーション Linear-gradient を通じて描画できます。

.out-rect {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px
    height: 80px;
    padding: 5px;
    background: linear-gradient(-45deg, transparent 10px, #58a 0) top right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

不規則な形状は、クリップパスのクリッピングプロパティを通じて切り取ることができます

  <style>
    body {
      
      
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    div {
      
      
      height: 100px;
      width: 150px;
      position: relative;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(45deg, gold, deeppink);
      animation: hue 3s infinite linear;
    }
    div::before,
    div::after {
      
      
      content: "";
      position: absolute;
      top: -15px;
      bottom: -15px;
      left: -15px;
      right: -15px;
      border: 5px solid #24acf2;
      border-image: linear-gradient(45deg, gold, deeppink) 1;
      clip-path: inset(0px round 10px);
      animation: clippath 3s infinite linear;
    }
    div::after {
      
      
      animation: clippath 3s infinite -1.5s linear;
    }
    span {
      
      
      color: white;
      font-size: 20px;
    }
    @keyframes hue {
      
      
      0% {
      
      
        filter: hue-rotate(0deg);
      }
      100% {
      
      
        filter: hue-rotate(360deg);
      }
    }
    @keyframes clippath {
      
      
      0% {
      
      
        clip-path: inset(0 0 95% 0);
        filter: hue-rotate(0deg);
      }
      25% {
      
      
        clip-path: inset(0 95% 0 0);
      }
      50% {
      
      
        clip-path: inset(95% 0 0 0);
      }
      75% {
      
      
        clip-path: inset(0 0 0 95%);
      }
      100% {
      
      
        clip-path: inset(0 0 95% 0);
        filter: hue-rotate(360deg);
      }
    }
  </style>
    <div>
    	<span>hello world</span>
  	</div>

  <style>
    .four-bugle {
      
      
      width: 600px;
      height: 400px;
      background: #ED9135;
      clip-path: path('M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z')
    }
  </style>