私は現在、クライアント用のPSD（下図）を作成しており、JSスライダーから特定のシェイプを切り取る方法についてのガイダンスを探しています。私の最初の思考プロセスは、バナーの下部にCSSの図形を重ねて、図に示すように、所望の効果を得ることです。JSバナーからシェイプを切り取るにはどうすればよいですか？
この方法の代替方法があるのだろうかと思っていました。私はインターネット上を見回してきましたが、私が達成しようとしていることについて多くの情報を見つけることができません。
すべてのアドバイスを歓迎します。前もって感謝します。
また、この目的を達成するためにビューポートの幅を使用することができます。それがあなたに役立つことを願っています。
.box {
width: 100%;
height: 300px;
position:relative;
background: #000;
}
.box:before
{
border-top:80px solid transparent;
border-left: 50vw solid #fff;
content: '';
position: absolute;
bottom: 0;
left: 0;
}
.box:after
{
border-top:80px solid transparent;
border-right: 50vw solid #fff;
content: '';
position: absolute;
bottom: 0;
right: 0;
}<div class="box"></div>SVG画像を使用してみてください！私は、これはビューポートの幅を使っても可能であるという手掛かりはありませんでした。 http://numberonedesigns.com/test/ –
ありがとうございます。 ： - ） –
あなたはCSSクリップ・パスを作成するためのthisツールを使用することができます。
一つの例は次のようになります。
.container {
background-color: orangered;
width: 100%;
height: 200px;
-webkit-clip-path: polygon(100% 0%, 100% 75%, 50% 100%, 0 75%, 0 0);
clip-path: polygon(100% 0%, 100% 75%, 50% 100%, 0 75%, 0 0);
}<div class="container"></div>これは、このサイトとまったく同じです。サイトを詳細に観察するだけで、完全なソリューションを見つけることができます。ソリューション
を取得するには以下をクリックすると、美しい –