Question

我想在盒子里面创建对角盒子。我怎么能用css做到这一点。

我附上了一张图片，正是我想要的。如果有任何想法，请与我分享。

enter image description here

我的代码在这里：

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

http://jsfiddle.net/Ae8Wv/661/ 你可以定位第二个div并指定top，left。

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

Answer 2

您只需要在第二个框中添加一些绝对位置。我建议将它全部包起来使其对具有相对定位的容器也具有响应性。使用left / top％值移动框，更大的增加将分别进一步移动它们。

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

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

我也在这里为你添加了包装器。取决于你是否想要它:)

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

Answer 3

给.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 4

使div绝对可能会打扰其他元素。你也可以在第一个div中移动第二个div并在第二个div上应用margin，如下所示：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 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

如何使用css创建对角线框？

6 个答案: