文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >创建三个相邻的倾斜div

问创建三个相邻的倾斜div
EN

Stack Overflow用户
提问于 2018-02-15 02:33:51
回答 2查看 110关注 0票数 0

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

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<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>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-15 03:26:46

您还可以使用display:flex。所以你可以为左边和右边设置任何你想要的宽度，而不用担心中心的宽度。

我认为使用flex比使用float更现代。

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<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>

​

在这种方法中，如果你不说左边和右边的宽度，它们将只取文本的宽度。

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

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2018-02-15 02:59:00

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

希望这能有所帮助。如果你还需要什么，我就在你身边。:)

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48794013

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档