Question

我正在为我的项目工作一个网页，我需要彼此相邻的三个倾斜的div。我在codepen上找到了这两个div，但是只有两个div我想在中间再做一个div，从两侧倾斜以适应中间。我试过但无法弄明白。有人可以帮我这个吗？

/* build the rectangles */

.rr-left,
.rr-right {
  position: relative;
  height: 200px;
  background: #2c3e50;
}

.rr-left {
  float: left;
  z-index: 8;
  width: 33%;
}

.rr-right {
  float: right;
  z-index: 9;
  width: 33%;
}


/* slanted edges using pseudo-elements */

.rr-left:after,
.rr-right:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.rr-left:after {
  right: 0;
  border-left: 100px solid #2c3e50;
  /* razorblade color */
  border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #2c3e50;
  /* razorblade color */
  border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}


/* hover styles */

.rr-left:hover,
.rr-right:hover {
  background: #34495e;
}

.rr-left:hover:after {
  border-left-color: #34495e;
}

.rr-right:hover:before {
  border-right-color: #34495e;
}


/* text positioning & styles */

.rr-text {
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  text-align: left;
  font-family: Arial;
  color: #FFFFFF;
}

.rr-text h3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}

.rr-text p {
  font-size: 13px;
}

<div class="rr-left">
  <div class="rr-text">
    <h3>rr-left div</h3>
  </div>
</div>
<div class="rr-right">
  <div class="rr-text">
    <h3>rr-right div</h3>
  </div>
</div>

Answer 1

这是一个实际响应的解决方案，因为每个元素是33％。

希望这有帮助。如果你还需要其他东西，我会在附近。：）

/* build the rectangles */

.rr-left,
.rr-right,
.rr-middle {
  position: relative;
  height: 200px;
  background: #2c3e50;
}

.rr-middle { 
background: aqua;
right: 33%;
}

.rr-left {
  float: left;
  z-index: 9;
  width: 33%;
}

.rr-right {
  float: right;
  z-index: 10;
  width: 33%;
  right: -33.5%;
}

.rr-middle {
  float: right;
  z-index: 10;
  width: 33%;
}


/* slanted edges using pseudo-elements */

.rr-left:after,
.rr-right:before,
.rr-middle:after,
.rr-middle:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.rr-left:after {
  right: 0;
  border-left: 100px solid #2c3e50;
  /* razorblade color */
  border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #2c3e50;
  /* razorblade color */
  border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}

.rr-middle:after {
  right: 0;
  border-left: 100px solid aqua;
  /* razorblade color */
  border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-middle:before {
  left: -100px;
  border-right: 100px solid aqua;
  /* razorblade color */
  border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}




/* hover styles */

.rr-left:hover,
.rr-right:hover {
  background: #34495e;
}

.rr-left:hover:after {
  border-left-color: #34495e;
}

.rr-right:hover:before {
  border-right-color: #34495e;
}


/* text positioning & styles */

.rr-text {
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  text-align: left;
  font-family: Arial;
  color: #FFFFFF;
}

.rr-text h3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}

.rr-text p {
  font-size: 13px;
}

<div class="rr-left">
  <div class="rr-text">
    <h3>rr-left div</h3>
  </div>
</div>
<div class="rr-middle">
  <div class="rr-text">
    <h3>rr-middle div</h3>
  </div>
</div>
<div class="rr-right">
  <div class="rr-text">
    <h3>rr-right div</h3>
  </div>
</div>

Answer 2

您也可以使用display：flex。因此，您可以设置左侧和右侧所需的任何宽度，而不必担心中心的宽度。

我认为使用flex比浮动更现代。

/* build the rectangles */
container
{
  display:flex;
}

.rr-left,
.rr-right {
  position: relative;
  height: 200px;
  background: #2c3e50;
}

.rr-left {
  z-index: 8;
  width: 33%;
}

.rr-right {
  z-index: 11;
  width: 33%;
}

.rr-mid
{
  flex:1;
  background-color:green;
  position:relative;
  z-index:10;
}

.rr-mid:before
{

  left: -100px;
border-right: 100px solid green;
border-top: 200px solid rgba(0, 0, 0, 0);
}
/* slanted edges using pseudo-elements */

.rr-left:after,
.rr-right:before,
.rr-mid:before{
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.rr-left:after {
  right: 0;
  border-left: 100px solid #2c3e50;
  /* razorblade color */
  border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #2c3e50;
  /* razorblade color */
  border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}


/* hover styles */

.rr-left:hover,
.rr-right:hover {
  background: #34495e;
}

.rr-left:hover:after {
  border-left-color: #34495e;
}

.rr-right:hover:before {
  border-right-color: #34495e;
}


/* text positioning & styles */

.rr-text {
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  text-align: left;
  font-family: Arial;
  color: #FFFFFF;
}

.rr-text h3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}

.rr-text p {
  font-size: 13px;
}

<container>
<div class="rr-left">
  <div class="rr-text">
    <h3>rr-left div</h3>
  </div>
</div>
<div class="rr-mid">
  <div class="rr-text">
    <h3>rr-mid</h3>
  </div>
</div>
<div class="rr-right">
  <div class="rr-text">
    <h3>rr-right div</h3>
  </div>
</div>
</container>

使用这种方法，如果你没有说左右宽度，它们只需要文字的宽度。

尝试在整页中运行代码段以查看差异。

/* build the rectangles */
container
{
  display:flex;
}

.rr-left,
.rr-right {
  position: relative;
  height: 200px;
  background: #2c3e50;
}

.rr-left {
  z-index: 8;
}

.rr-right {
  z-index: 11;
}

.rr-mid
{
  flex:1;
  background-color:green;
  position:relative;
  z-index:10;
}

.rr-mid:before
{

  left: -100px;
border-right: 100px solid green;
border-top: 200px solid rgba(0, 0, 0, 0);
}
/* slanted edges using pseudo-elements */

.rr-left:after,
.rr-right:before,
.rr-mid:before{
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  z-index:-1;
}

.rr-left:after {
  right: 0;
  border-left: 100px solid #2c3e50;
  /* razorblade color */
  border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #2c3e50;
  /* razorblade color */
  border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}


/* hover styles */

.rr-left:hover,
.rr-right:hover {
  background: #34495e;
}

.rr-left:hover:after {
  border-left-color: #34495e;
}

.rr-right:hover:before {
  border-right-color: #34495e;
}


/* text positioning & styles */

.rr-text {
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  text-align: left;
  font-family: Arial;
  color: #FFFFFF;
}

.rr-text h3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}

.rr-text p {
  font-size: 13px;
}

<container>
<div class="rr-left">
  <div class="rr-text">
    <h3>rr-left div</h3>
  </div>
</div>
<div class="rr-mid">
  <div class="rr-text">
    <h3>rr-mid</h3>
  </div>
</div>
<div class="rr-right">
  <div class="rr-text">
    <h3>rr-right div</h3>
  </div>
</div>
</container>

制作三个相邻的倾斜div

2 个答案: