如何使用css創建對角線框？

Question

我想在框內創建對角框。我怎樣才能做到這一點使用CSS。

我附上一張圖片，正是我想要的。如果有人有任何想法，請與我分享。

我的小提琴：http://jsfiddle.net/Ae8Wv/660/

我的代碼是在這裏：

HTML：

<div class="foo bg1"></div> 
<div class="foo bg2"></div> 

CSS：

.foo { 
    float: left; 
    width: 40px; 
    height: 40px; 
    margin: 5px 5px 5px 5px; 
    border-width: 1px; 
    border-style: solid; 
    border-color: rgba(0,0,0,.2);  
} 

.bg1 { 
    background-color:#13b4ff; 
} 

.bg2 { 
    background-color:#ab3fdd; 
} 

我的小提琴：http://jsfiddle.net/Ae8Wv/660/

Answer 1

製作的div絕對可能會干擾其他元素。您還可以將第二個div第一個div內和第二個div申請保證金像顯示在此琴：http://jsfiddle.net/6k9Ltyoa/

<div class="foo bg1"> 
    <div class="foo bg2"></div> 
</div> 

.foo { 
    float: left; 
    width: 40px; 
    height: 40px; 
    border-width: 1px; 
    border-style: solid; 
    border-color: rgba(0,0,0,.2); 

} 

.bg1 { 
    background-color:#13b4ff; 
} 

.bg2 { 
    background-color:#ab3fdd; 
    margin-top:50%; 
    margin-left:50%; 
} 

Answer 2

http://jsfiddle.net/Ae8Wv/661/ 您可以定位第二個div並指定頂部，左側。

.bg2 { 
background-color:#ab3fdd; 
position: absolute; 
top: 10px; 
left: 10px; 
} 

Answer 3

你只需要添加一些絕對位置到第二個盒子。我建議把它全部包裝起來，以便使容器具有相對定位的響應性。使用左/上％值移動框，更大的增加值將分別進一步移動它們。

http://jsfiddle.net/Ae8Wv/662/

.bg2 { 
background-color:#ab3fdd; 
position:absolute; 
left:2%; 
top:2%; 
} 

我加了包裝爲你也在這裏。給你你是否希望它:)

http://jsfiddle.net/Ae8Wv/665/

Answer 4

給這個.bg2 div元素position: absolute;。別忘了把position: relative;放在.bg1上，否則絕對定位不起作用。

HTML

<div class="foo bg1"> 
    <div class="foo bg2"></div> 
</div> 

CSS

.foo { 
    position: relative; 
    float: left; 
    width: 40px; 
    height: 40px; 
    margin: 5px 5px 5px 5px; 
    border-width: 1px; 
    border-style: solid; 
    border-color: rgba(0,0,0,.2); 

} 

.bg1 { 
    background-color:#13b4ff; 
} 

.bg2 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background-color:#ab3fdd; 
} 

http://jsfiddle.net/skeurentjes/Ae8Wv/671/

Answer 5

只需添加一定的餘量，以紫色方塊這樣 http://jsfiddle.net/8odoros/Ae8Wv/667/

.bg2 { 
    background-color:#ab3fdd; 
    margin-left:-30px; 
    margin-top:20px; 
} 

Answer 6

如何關於翻譯？

.bg2{transform: translate(-40px, 20px)} 

fiddle