Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Используйте границу, чтобы нарисовать трапецию (содержимое должно быть абсолютно позиционировано)

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 используется для определения области отсечения элемента, чтобы контролировать, какие части видимы, а какие скрыты. Он позволяет создавать сложные формы обрезки, используя различные функции и параметры. В CSS свойство clip-path может использовать различные функции для определения области отсечения. Обычно используемые функции следующие:

1. Circle(): создайте круглую область обрезки. Параметры — радиус и координаты центра круга.
2. ellipse(): создайте эллиптическую область отсечения. Параметры — радиусы горизонтальной и вертикальной осей и координаты центра окружности.
3. Polygon(): Создайте область отсечения многоугольника. Параметры — это координаты вершин, составляющих многоугольник.
4. path(): используйте путь SVG для определения области обрезки. Аргумент представляет собой строковое представление пути.