Konteyneri sağ kenarından sabit bir mesafede nasıl klipsleyin?

Offset a background image from the right using CSS'da olduğu gibi shape sayfamı kapsayıcının sağ kenarına göre belirli bir mutlak değerde konumlandırmak istiyorum.Konteyneri sağ kenarından sabit bir mesafede nasıl klipsleyin?

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

Bu, 1m uzunluğunda sağdaki öğeden bir üçgeni kesmelidir.

% 'i kullanamıyorum çünkü üçgen boyutu, istemediğim öğenin uzunluğuna bağlı olacaktır.

Maalesef bu şekilde çalışmıyor. Başka bir çözüm var mı?

kaynak

2016-04-07 Andy

Sana firefox çalışmaz bu klip yolu yöntemi uyarmak gerekir; çapraz tarayıcılar kodunu [** bu linkte **] (http://cssplant.com/clip-path-generator) –

oluşturabilirsiniz. Eğer klip yolu ile bir çözüm yoksa, bunu X'e çevirebilirsiniz. % 100 ya da bir ayna oluşturun ve sağ kenarda + scaleX (-1) ya da benzer bir şekilde dönüş kökenini ayarlayın. – FelipeAls

@FelipeAls bu kulağa ilginç geliyor - ama bunu gerçekten nasıl yapıyorsunuz? Şekil metin içeriyor, bu yüzden yansıtma işe yaramıyor sanırım? – Andy

1em'u 100%'dan çıkarmak için calc işlevini kullanarak istenen efekti elde edebilirsiniz. Bu şekilde yapılması, noktaların her zaman kabın sağ kenarından 1em olacağı ve öğenin uzunluğuna bağlı olmayacağı anlamına gelir.

clip-path ile bunu yapmanın başka yolu yoktur. background-image'dan farklı olarak, bunlar referans olarak bir taraf almaz.

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>

kaynak

2016-04-07 16:13:51 Harry

Hei dikdörtgen tipp için teşekkürler, tabii ki üçgeni kastediyorum (: – Andy

Konteyneri sağ kenarından sabit bir mesafede nasıl klipsleyin?

cevap

İlgili konular