技術共有

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

1. 枠線を使用して台形を描画します (コンテンツは絶対位置に配置する必要があります)

HTML:

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

CS: ...

.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. クリップパスを使用して台形を描画します

HTML：

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

スタイル：

.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 パスを使用してトリミング領域を定義します。引数はパスの文字列表現です。