特殊形状div

<div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543989728406&di=76b777451f222733dfd6e63923cdec5a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F80cb39dbb6fd5266fcbeafe1a118972bd50736a9.jpg" alt="">
</div>

* {
    
    
    padding: 0;
    margin: 0;
}
div {
    
    
    float: left;
    background-color: wheat;
}
img {
    
    
    float: left;
    width: 300px;
    height: 300px;
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

使用されるコア属性

 clip-path: polygon

polygon（,,…、）は各ポイントの座標を定義し、

CSSは、グラフィック機能を介してグラフィックを定義する基本的なグラフィックの略です。基本的なグラフィックは、shape-outside属性またはclip-path属性のパラメーターとして使用できます。これらの属性を要素に適用した後、要素の周りのコンテンツを要素にラップしたり、指定したグラフィックを使用してコンテンツをクリップしたりできます。

polygon（）関数の構文は次のとおりです。

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
/* 其中.. */
<shape-arg> = <length> | <percentage>

polygon（）関数は、ポリゴンを定義するために使用されます。そのパラメーターは座標ペアのセット（）であり、各座標ペアはポリゴンの頂点座標を表します。ブラウザは最後の頂点と最初の頂点を接続して閉じたポリゴンを取得します。座標ペアはコンマで区切られ、絶対値またはパーセント単位の値を使用できます。

座標ペアのパラメーターに加えて、polygon（）関数はオプションのキーワードfill-ruleも使用できます。このキーワードは、交差する可能性のある多角形の領域を処理する方法を指定します。可能な値はゼロ以外で偶数です。デフォルト値はゼロ以外です。

以下は、すべての有効なpolygon（）関数宣言です。

polygon(0 0, 100% 100%, 0 100%);
 
polygon(0 0, 100% 100%, 0 100%);
 
polygon(50px 0px, 100px 100px, 0px 100px);
 
polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);