clip-path

2熱度

1回答

我想根據形狀剪裁圖像，如下圖所示。但我的代碼不能在IE中工作。我怎樣才能讓它在IE中工作？ .svg-image { background: url(http://r-ce.com/wp-content/uploads/2016/01/Driving-Classes-Deal1-1.jpg); width: 320px; height: 320px;

0熱度

1回答

SVG剪裁的背景縮放 - 如何保持縱橫比？

列組件的背景應與容器一起縮放以保持長寬比=保持總是像剪切路徑形狀一樣完美的圓形。我希望稍後剪切路徑具有更復雜的形狀，但爲了演示目的，我使用圓形。這是現在的樣子：這是應該的：如何使形狀保持始終在正確的縱橫比和還與列縮放？ body { background-image: url("https://i.imgur.com/M6tL2a8.png"); backgrou

0熱度

1回答

使用CSS將標題頁面拆分爲圖像

我面臨的一個問題是，將主頁面佈局中的標題拆分爲左下角至右上角。我找到的所有資源都將它們分成兩種顏色。但是，當我想添加圖片時，我看不到任何結果。見我做的代碼，我不知道如何消除它們之間的空間 class-image-1 { background-image: url(/img/imag-1-bg.png); height: 100vh; -webkit-clip-pat

0熱度

1回答

實現對角線切片佈局，其中的div並排

我試圖實現對角佈局像這樣坐在一起 - 而且我遇到https://bennettfeely.com/clippy/這是完美的，因爲我可以用夾子-path：多邊形創建我的形狀，只有對它的支持不是很好（在IE中根本不起作用）。我試圖找到polyfills，但到目前爲止，找不到任何可以正常工作的東西。每個對角線部分將成爲客戶端將更新的文章傳情者，因此圖片和一些內容將與其關聯。我創建了一個小提琴，它顯示

0熱度

1回答

div中帶有剪輯路徑的元素不能用於絕對位置

我正在嘗試在div中添加一個工具提示clip-path: polygon。問題是我不能給我的工具提示position: absolute（在父div上方）。當父div沒有剪輯路徑regule時，一切正常。類似的東西： <div> <div class="house"> <div class="tooltip"> ITEM 1 </div> </div> </d

0熱度

1回答

下拉菜單不工作使用剪輯路徑的css

我正在對角線側的導航欄上，所以我使用剪輯路徑，但我的下拉菜單不起作用。我該如何解決它。謝謝。示例代碼 https://www.bootply.com/HBn3AUWrKQ

3熱度

1回答

這個角度在任何寬度都可以相同嗎？

我正在嘗試使角度不變的底部邊緣具有相同的角度，無論視口寬度。使用clip-path產生了最平滑的邊緣，但我不知道是否有calc()我可以用來保持角度。偏斜的僞元素可以工作，但抗鋸齒效果差，所以我想避免這種情況。所以我的問題是：使用clip-path: polygon(0 0, 100% 0, 100% calc(/* what goes here */, 0 100%)什麼是calc()，使

0熱度

1回答

SVG圖像剪輯路徑不希望向右移動40％

如何將SVG剪輯路徑向右移動40％？ https://jsfiddle.net/vtgmsyg0/ 我嵌套「SVG」不響應指定爲「x座標」的值40％... 我用這個嵌套SVG ... <svg width="120%" height="855"> <svg width="900px" height="855px" x="40%" y="10"> <clipPath i

1熱度

1回答

使用剪輯路徑在Chrome中的子像素渲染問題

我有一個按鈕，右側有角，我使用剪輯路徑和：僞選擇器後實現。這是如何工作的： a { height:40px; line-height:40px; color:#fff; background:red; display:inline-block; padding:0 10px; position:rel

0熱度

1回答

裁剪路徑和比例的組合導致閃爍

我正在試驗CSS網格，剪輯路徑和變換，並遇到了一個奇怪的錯誤。設置如下：一個由SVG剪切的幾個項目的網格，每個網格包含一個圖像和一些文本以及懸停時的縮放轉換。現在我看到的錯誤是剪輯路徑有時會「閃爍」，顯示毫秒的未剪切項目。到目前爲止，我在Chrome和Opera中看到過這種行爲，Firefox的行爲正常。下面是一些CSS的（筆展示了錯誤，並在這裏全碼：https://codepen.io/ko