在CSS中切片div

我只是想知道是否有可能，比如從任何一邊切出一個div。在CSS中切片div

例如，說我有一個div「盒子」

#box { 
    width:100px; 
    height:100px; 
    background:red; 
}

，我想切片從一塊只剩下20像素和100像素高度的寬度，而不是使之透明，但一切仍然位於切片之前的位置。

我研究了所有我能找到的是如何創建透明的邊框角落。

是否有div可以切片或允許div的特定區域是透明的？

預先感謝您。

編輯

這就是我要做的，我想就與窗體透明的第二個div左側的〜50像素，所以它看起來像它的背後第一格。我知道有些人可能會建議我使用z-index，但它不起作用。

來源

2015-10-23 Samir Chahine

不，那沒有任何意義。 'div'自己是_dividers_或'slices'。 – somethinghere

這聽起來不可能，但也許你應該添加你想要做的事情的圖像。 – Itay

以及右邊的透明邊框有什麼問題？ – fcalderan

這似乎是的完美用例，需要除靜態以外的其他位置定位的屬性，但按其他方式按預期方式工作，更改項目的圖層順序。我不確定你遇到的問題是什麼（如果另一個不可見的元素覆蓋它，最好的方法是右鍵單擊並檢查元素以查看是否選中了正確的元素）。

我已經添加了一小段代碼，向您展示了z-index應該如何工作。我一直在增加z-索引，這顯然是一個壞主意，最好是對它們進行排序，但爲了這個例子的目的，它確實很好。

但是，我可以給出的最好的提示是嘗試儘可能多地使用盡可能多的正數 z-indexes。負z指數可能下沉到諸如你的身體和僞元素之類的東西之下，使得很難弄清楚發生了什麼。我也相信，當我們用正數說話的時候，它讓我們的小腦袋變得更加有意義！

var divs = document.querySelectorAll('div'); 
 
var index = 4; 
 

 
for(var i = 0; i < divs.length; i++) divs[i].addEventListener('click', function(){ 
 
    this.style.zIndex = ++index; 
 
});

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: grey; 
 
    z-index: -1; 
 
    position: fixed; 
 
    left: 100px; 
 
    top: 100px; 
 
} 
 
div + div { 
 
    z-index: 0; 
 
    left: 120px; 
 
    top: 120px; 
 
    background: red; 
 
} 
 
div + div + div { 
 
    z-index: 1; 
 
    left: 140px; 
 
    top: 140px; 
 
    background: blue; 
 
} 
 
div + div + div + div { 
 
    z-index: 2; 
 
    left: 160px; 
 
    top: 160px; 
 
    background: yellow; 
 
}

<div>-1</div> 
 
<div>0</div> 
 
<div>1</div> 
 
<div>2</div>

至於文檔：https://developer.mozilla.org/en/docs/Web/CSS/z-index

讓我知道這會有所幫助，因爲我，很明顯，目前還不清楚你所看到的精確的問題。

來源

2015-10-23 15:49:50 somethinghere

哦..這使得更有意義，我會嘗試一些事情，並希望它的工作.. –

@ SamirChahine祝你好運:) – somethinghere

您可以使用linear-gradients和afterpseudo-element實現這一

我用linear-gradient，使DIV半透置於afterpseudo-element隱藏一半的透明部分

body{ 
 
    background:url('http://lorempixel.com/500/500'); 
 
    background-size:cover; 
 
} 
 
div{ 
 
    width:300px; 
 
    height:300px; 
 
    border:2px solid; 
 
    background:linear-gradient(transparent 50%,orange 50%); 
 
    position:relative; 
 
} 
 

 
div:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:50%; 
 
    height:50%; 
 
    z-index:-1; 
 
    background:orange; 
 
    left:50%; 
 
}

<div></div>

的

來源

2015-10-23 15:18:54 Akshay

這太奇怪了。這可能是因爲它是星期五，但我無法把我的大腦包裹在這個周圍。很酷，但我不知道這是可能的。 +1 – somethinghere

@somethinghere它實際上是非常簡單的線性漸變產生一個半填充的廣場，然後只是把一個'後'有半寬在右側:) – Akshay

當你說這樣看起來很簡單，是的:)很酷，每天學些新東西！ – somethinghere

在CSS中切片div

回答

相關問題