css斜角/曲线切口角

最新推荐文章于 2024-09-27 08:43:33 发布

SiQi***

最新推荐文章于 2024-09-27 08:43:33 发布

阅读量2.8k

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/SQiqiqi/article/details/88171858

版权

background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0),
linear-gradient(45deg, transparent 15px, #655 0);

/*右下角*/
background: linear-gradient(45deg, transparent 15px, #655 0);

/*左下角*/
background: linear-gradient(-45deg, transparent 15px, #58a 0);

/*两个角*/
background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;

/*四个角*/
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #655 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;


/*前面的代码有个问题是，它不是特别可维护的。要改变背景颜色还有四个角的大小，需要五次编辑。
加入预处理器mixin有助于减少重复。这是SCSS代码：*/

@mixin beveled-corners($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) {
    background: $bg;
    background: linear-gradient(135deg, transparent $tl, $bg 0) top left,
                linear-gradient(225deg, transparent $tr, $bg 0) top right,
                linear-gradient(-45deg, transparent $br, $bg 0) bottom right,
                linear-gradient(45deg, transparent $bl, $bg 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/*然后，在需要的时候，它可以像这样被使用，使用2-5个参数：*/

@include beveled-corners(#58a, 15px, 5px);

/*在这个示例中，我们将会得到在左上角和右下角得到15px斜切角，在左下角和右上角得到5px斜切角，
和border-radius的原理相似。这是因为我们为SCSS的mixin的参数提供了默认值，还有，这些默认值也可以引用其它的参数。*/
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%; background-repeat: no-repeat;