cssを使用してdivを対角線で「切り取る」

Question

私はある程度のスペースの後にdivを斜めに「カット」しようとしています。説明するのは非常に難しいです。それは次のようになります。あなたがキャン見たよう

、青の親divが白い子divの内側と背面にあります。白いdivは親divと同じ幅になりますが、ピクセルの後に斜めに（例えば100px後）に「カット」されます。私はこのようなことは一度もしていませんでしたが、CSS3でtransitionまたはrotationなどを使って行うことができると思いました（私には分かりませんが、私はCSS3に慣れていません）。

私は斜めのdivを検索しましたが、私はthisのような結果しか得ていません。残念ながら、私はそれとは関係ないことを知っています。これも可能ですか？あなたは私にいくつかのヒントをくれますか？

Answer 1

境界線の色を使用して、斜めにカットされたdivを表示します。

::afterと組み合わせて1つのdivのみを使用します。魔法のように

.background { 
 
    background-color: #5555AA; 
 
    padding-top: 15px; 
 
} 
 
.content { 
 
    position: relative; 
 
    background-color: white; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    padding: 0 100px 0 200px; 
 
    display:inline-block; 
 
} 
 
.content::after { 
 
    position: absolute; 
 
    right: -50px; 
 
    content: ""; 
 
    border-bottom: 25px solid white; 
 
    border-left: 25px solid white; 
 
    border-top: 25px solid transparent; 
 
    border-right: 25px solid transparent; 
 
}

<div class="background"> 
 
    <div class="content">KONTAKT</div> 
 
</div>