3

CSS を使用して背景画像を右からオフセットするのと同じようにshape、コンテナの右端を基準にして絶対値を配置したいと考えています。

clip-path: polygon(0 0, right 1em 0, 100% 50%, right 1em 100%, 0 100%, 0 0);

これにより、右側の要素から 1em の長さの三角形が切り取られるはずです。

% は使用できません。三角形のサイズが要素の長さに依存するためです。これは望ましくありません。

残念ながら、この方法では機能しません。別の解決策はありますか？

4

1 に答える 1

8

calc減算する関数を1em使用して100%、必要な効果を得ることができます。このようにすると、ポイントは常に1emコンテナーの右端からになり、要素の長さに依存しなくなります。

でこれを行う方法は他にありませんclip-path。とは異なりbackground-image、これらは参照として側面を取りません。

div{
  height: 40vh;
  width: 100%;
  -webkit-clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 0 100%, 0 0);  
  background: red;
  }
<div></div>

于 2016-04-07T16:13:51.427 に答える