绘制不规则图形方法 clip-path 和 linear-gradient

前端混子

已于 2023-04-27 18:14:36 修改

阅读量356

点赞数

分类专栏： css 文章标签： css html css3

于 2023-04-27 18:14:25 首次发布

本文链接：https://blog.csdn.net/ithunzi/article/details/130412363

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

可以通过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;
}

可以通过clip-path 裁剪属性剪切不规则形状

在这里插入图片描述

  <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>