css切角效果,多角,折角效果

最新推荐文章于 2024-10-23 18:19:54 发布

秋心吖

最新推荐文章于 2024-10-23 18:19:54 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏：页面文章标签： css html

原文链接：https://www.cnblogs.com/yhhBKY/p/10642696.html

页面专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用CSS实现复杂的背景渐变效果，包括线性渐变和径向渐变的多种应用，以及如何通过Sass混合器简化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文作者: 吼吼酱
原文:链接

html

<div class="one">12345</div>
<div class="two">abcde</div>

css

.one{
    height: 200px;
    width: 200px;
    margin: 10px auto;
    line-height: 200px;
    background: yellowgreen;
    background: 
              linear-gradient(-45deg,transparent 15px, yellowgreen 0)bottom right,
              linear-gradient(-135deg,transparent 15px, yellowgreen 0)top right,
              linear-gradient(135deg,transparent 15px, yellowgreen 0)top left,
              linear-gradient(45deg,transparent 15px, yellowgreen 0)bottom left;
              background-size: 50% 50%;
              background-repeat: no-repeat;
  }
  .two{
    height: 200px;
    width: 200px;
    margin: 10px auto;
    background: #58a;
    line-height: 200px;
    background: 
              radial-gradient(circle at bottom right,transparent 15px, #58a 0)bottom right,
              radial-gradient(circle at top right,transparent 15px, #58a 0)top right,
              radial-gradient(circle at top left,transparent 15px, #58a 0)top left,
              radial-gradient(circle at bottom left,transparent 15px, #58a 0)bottom left;
              background-size: 50% 50%;
              background-repeat: no-repeat;
  }

acss的也可以这样写

@mixin current_color($bg,$tr){
  background: $bg;
  background: 
              linear-gradient(-45deg,transparent $tr, $bg 0)bottom right,
              linear-gradient(-135deg,transparent $tr, $bg 0)top right,
              linear-gradient(135deg,transparent $tr, $bg 0)top left,
              linear-gradient(45deg,transparent $tr, $bg 0)bottom left;
              background-size: 50% 50%;
              background-repeat: no-repeat;
}
.one{
    height: 200px;
    width: 200px;
    margin: 10px auto;
    line-height: 200px;
    @include current_color(yellowgreen,15px)
  }

如图效果
在这里插入图片描述