Question

我需要制作模板，如下图所示：

我用顶部方块取得了成功但未能将底部方块取消 - 无法将其移至左下角。

代码是：

 <style>
    .red_top {
        background-color:red; 
        position:absolute; 
        width:65px; 
        height:65px; 
        z-index:-1;
        }
    .red_bottom {
        align:right; 
        verical-align:bottom; 
        background-color:red; 
        position:relative; 
        width:65px; 
        height:65px; 
        z-index:-1; 
        top:-35px;}
    .main_cont 
        {
            border:1px solid blue; 
            margin-top:25px; 
            margin-left:25px; 
            min-height:100px; 
            z-index:1; 
            background-color:#FFF;
        }
    </style>
    <body style="margin: 60px 50px;">
    <div style="width:100%; border:1px solid #000;">
        <div class="red_top">&nbsp;</div>
        <div class="main_cont">Content Here</div>
        <div class="red_bottom">&nbsp;</div>
    </div>

https://codepen.io/anon/pen/OxavGL

我需要为red_bottom div正确放置做些什么？

Answer 1

＆＃13;

    .red_top {
        background-color: red;
        position: absolute;
        width: 65px;
        height: 65px;
        z-index: -1;
    }
    .red_bottom {
        background-color: red;
        position: absolute;
        width: 65px;
        height: 65px;
        z-index: -1;
        bottom: 0;
        right: 0;
    }
    .main_cont {
        border: 1px solid blue;
        margin: 25px;
        min-height: 100px;
        z-index: 1;
        background-color: #FFF;
    }

＆＃13;

    <div style="width: 100%; border: 1px solid #aaa; position: relative;">
        <div class="red_top">&nbsp;</div>
        <div class="main_cont">Content Here</div>
        <div class="red_bottom">&nbsp;</div>
    </div>

＆＃13;

Answer 2

body {
  margin: 60px 50px;
}

.Wrap {
  position: relative;
  width: 100%;
}

.main_cont {
  position: relative;
  background-color: #FFF;
  border: 1px solid blue;
  margin-top: 25px;
  margin-left: 25px;
  min-height: 100px;
}

.main_cont::before,
.main_cont::after {
  content: "";
  position: absolute;
  background-color: red;
  width: 65px;
  height: 65px;
  z-index: -1;
}

.main_cont::before {
  top: -33px;
  left: -33px;
}

.main_cont::after {
  bottom: -33px;
  right: -33px;
}

<div class="Wrap">
  <div class="main_cont">Content Here</div>
</div>

Answer 3

试试这个：

＆＃13;

  body {
      margin: 5%;
    }

    .Wrap {
      position: relative;
      width: 100%;
    }

    .main_cont {
      position: relative;
      background-color: #FFF;
      border: 1px solid blue;
      min-height: 100px;
	  text-align: center;
    }

    .main_cont::before,
    .main_cont::after {
      content: "";
      position: absolute;
      background-color: red;
      width: 50px;
      height: 50px;
      z-index: -1;
    }

    .main_cont::before {
      top: -25%;
      left: -3%;
    }

    .main_cont::after {
      bottom: -25%;
      right: -3%;
    }

＆＃13;

 <div class="Wrap">
      <div class="main_cont">Content Here</div>
    </div>

＆＃13;

Answer 4

你走了：

＆＃13;

.mainDiv {
  position: relative;
  width: 500px;
  height: 700px;
  border: 1px solid black;
  background-color: white;
}

.red_top {
  background-color:red; 
  position:absolute; 
  left: -31px;
  top: -31px;
  width:65px; 
  height:65px; 
  z-index:-1;
}

.red_bottom {
  background-color:red; 
  position:absolute; 
  bottom: -31px;
  right: -31px;
  width:65px; 
  height:65px; 
  z-index:-1;

.main_cont {
  border:1px solid blue; 
  margin-top:25px; 
  margin-left:25px; 
  min-height:100px; 
  z-index:1; 
  background-color:#FFF;
}

＆＃13;

<body style="margin: 60px 50px;">
<div class="mainDiv">
	<div class="red_top"></div>
	<div class="main_cont">Content Here</div>
	<div class="red_bottom"></div>
</div>

＆＃13;

Answer 5

CSS：

.main_cont::before {
    content: '';
    background-color: red;
    position: absolute;
    width: 65px;
    height: 65px;
    z-index: -1;
    top: 0;
    left: 0;
}

.main_cont::after {
    content: '';
    background-color: red;
    position: absolute;
    width: 65px;
    height: 65px;
    z-index: -1;
    bottom: 0;
    right: 0;
}
.main_cont {
    border: 1px solid blue;
    margin: 25px;
    min-height: 100px;
    z-index: 1;
    background-color: #FFF;
}

HTML：

<div style="width: 100%; border: 1px solid #000; position: relative;">
    <div class="main_cont">Content Here</div>
</div>

Answer 6

您可以使用以下解决方案，而不使用其他<div>元素作为红色框。此解决方案使用:before和:after创建红色框。

＆＃13;

div.container {
  border:1px solid #000;
  position:relative;
  width:100%; 
}
div.main {
  background:#fff;
  border:1px solid blue; 
  margin:33px;
  min-height:100px;  
  position:relative;
  width:auto;
}
.red-box:before, .red-box:after {
  background:red;
  content:"";
  height:65px;
  position:absolute;
  width:65px;
  z-index:-1;
}
.red-box:before { 
  left:0;
  top:0;
  transform:translate(-50%, -50%);
}
.red-box:after {
  bottom:0;
  right:0;
  transform:translate(50%, 50%);
}

＆＃13;

<div class="container">
  <div class="main red-box">Content Here</div>
</div>

＆＃13;

如何对齐底部块？

6 个答案: