CSS之异形图型

1、使用border画梯形(内容需要绝对定位)

HTML:

//左边斜边
<div class="t">
    <div class="f"></div>
</div>
//右边斜边
<div class="t2">
    <div class="f"></div>
</div>

CSS:

.t{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-right: 19px solid transparent;
    border-bottom: 35px solid #4B75FF;
}

.f{
    position: absolute;
    bottom: 0;
}
.t2{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-left: 19px solid transparent;
    border-top: 35px solid #4B75FF;
}

结果:

2、使用clip-path画梯形

HTML:

<div class="card-info_s3-bottom_cc_left">
</div>

CSS:

.card-info_s3-bottom_cc_left{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
    width: 277.5px;
    height: 35px;
    padding-left: 26px;
    clip-path:polygon(0 0,258.5px 0px,277.5px 35px,0px 35px);
    background-color: #4B75FF;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 30px;
}

结果:

拓展:clip-path

clip-path属性用于定义元素的裁剪区域,以控制哪些部分可见和哪些部分隐藏。它允许您使用不同的函数和参数来创建复杂的裁剪形状。在 CSS 中,clip-path 属性可以使用不同的函数来定义裁剪区域。常用函数如下:

1、circle():创建一个圆形裁剪区域。参数是半径和圆心的坐标。
2、ellipse():创建一个椭圆形裁剪区域。参数是横轴和纵轴的半径以及圆心的坐标。
3、polygon():创建一个多边形裁剪区域。参数是构成多边形的顶点坐标。
4、path():使用 SVG 路径来定义裁剪区域。参数是路径的字符串表示形式。

上一篇:构建图像金字塔遍历不同的大小