文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用容器中间的skew属性进行顶部和底部

问如何使用容器中间的skew属性进行顶部和底部
EN

Stack Overflow用户
提问于 2017-05-19 21:26:55
回答 2查看 56关注 0票数 0

我使用代码片段中的代码将形状放在中间，就像您运行代码片段时所看到的那样，最后一个框除外。然而，我不想要框之间的空白，但我正在努力做到这一点

​

代码语言：javascript
复制
.image-container {
    position: relative;
    width: 100%;
    height: 331px;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-flow: wrap column;
    align-items: center;
    justify-content: center;
}
.image-container:before {
   content: '';
   position: absolute;
   z-index: -4;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}
.image-container.image-container-col-2 .image-container-split:nth-child(odd) {
    left: 0;
    right: 50%;
}
.image-container.image-container-col-2 .image-container-split:nth-child(even) {
    left: 50%;
    right: 0;
}
.image-container-split {
    position: absolute;
    z-index: -3;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 20px solid transparent;
    border-bottom-color: #fff;
    padding-bottom: 20px;
    display: flex;
    flex-direction: wrap column;
    align-items: center;
    justify-content: center;
}

.image-container-split:first-child {
    border-left: none;
    padding-left: 20px;
}
.image-container-split:last-child {
    border-right: none;
    padding-right: 20px;
}
.image-container-split:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -20px;
    border: 10px solid #fff;
    border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):before {
    right: -20px;
    border-left-color: transparent;
}
.image-container-split:nth-child(even):before {
    left: -20px;
    border-right-color: transparent;
}
.image-container-split:after {
    content: '';
    position: absolute;
    z-index: -3;
    top: -20px;
    left: 0;
    right: 0;
    bottom: -20px;
    opacity: 0.5;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}
.image-container-split:first-child:after {
    border-left: none;
}
.image-container-split:last-child:after {
    border-right: none;
}
.image-container-split:nth-child(odd):after {
    background-color: red;
    right: -20px;
}
.image-container-split:nth-child(even):after {
    background-color: red;
    left: -20px;
}
.new_container{
  background: blue;
}

.blue{
  background-color: blue;
}
代码语言：javascript
复制
<section id="latest_news">
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
      <!-- content goes here -->
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ex aspernatur praesentium iste ratione nesciunt consectetur animi, temporibus, commodi quibusdam, nemo assumenda provident nam vel? Necessitatibus sint sit illum atque.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split">
        </div>
        <div class="image-container-split">
        </div>
      </div>
    </div>
  </div>
  
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
            <!-- content goes here -->
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi expedita, fugiat deleniti sit quos in accusamus laboriosam! Nulla rerum vero sunt accusamus. Suscipit nesciunt reiciendis est repudiandae sunt modi.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split blue">
        </div>
        <div class="image-container-split blue">
        </div>
      </div>
    </div>
  </div>
  <div class="new_container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque corrupti voluptatibus sapiente optio modi veritatis eveniet corporis deleniti aspernatur dolores atque doloribus alias, laborum officiis quod consectetur! Possimus magni, officiis.
  </div>
</section>

​

希望你能用更好的技术帮助我做到这一点。

提前感谢

html
css
flexbox
EN

回答 2

Stack Overflow用户

发布于 2017-05-19 21:37:26

为此，您应该使用另一种简单的技术，就像这样

CSS

代码语言：javascript
复制
.first,
.second,
.third {
  position: relative;
  display: block;
  height: 100px;
  padding: 20px;
}

.first {
  background: red;
}

.first:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 0, 0, 0);
  border-top-color: red;
  border-width: 30px;
  margin-left: -30px;
  z-index: 2;
}

.second {
  background: blue;
}

.second:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(0, 0, 255, 0);
  border-top-color: blue;
  border-width: 30px;
  margin-left: -30px;
  z-index: 2;
}

.third {
  background: yellow;
}

HTML

代码语言：javascript
复制
<div class="first">
  sdfsdfsdfsdfsdf
</div>

<div class="second">
  sdfsdfsdfsdfsfs
</div>

<div class="third">
  sdfsdfsdfsdfs
</div>
票数 1
EN

Stack Overflow用户

发布于 2017-05-19 21:44:53

只需在.image-container中添加margin-bottom: -20px;就可以拉近距离

​

代码语言：javascript
复制
.image-container {
    position: relative;
    width: 100%;
    height: 331px;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-flow: wrap column;
    align-items: center;
    justify-content: center;
    margin-bottom: -20px;
}
.image-container:before {
   content: '';
   position: absolute;
   z-index: -4;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}
.image-container.image-container-col-2 .image-container-split:nth-child(odd) {
    left: 0;
    right: 50%;
}
.image-container.image-container-col-2 .image-container-split:nth-child(even) {
    left: 50%;
    right: 0;
}
.image-container-split {
    position: absolute;
    z-index: -3;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 20px solid transparent;
    border-bottom-color: #fff;
    padding-bottom: 20px;
    display: flex;
    flex-direction: wrap column;
    align-items: center;
    justify-content: center;
}

.image-container-split:first-child {
    border-left: none;
    padding-left: 20px;
}
.image-container-split:last-child {
    border-right: none;
    padding-right: 20px;
}
.image-container-split:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -20px;
    border: 10px solid #fff;
    border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):before {
    right: -20px;
    border-left-color: transparent;
}
.image-container-split:nth-child(even):before {
    left: -20px;
    border-right-color: transparent;
}
.image-container-split:after {
    content: '';
    position: absolute;
    z-index: -3;
    top: -20px;
    left: 0;
    right: 0;
    bottom: -20px;
    opacity: 0.5;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}
.image-container-split:first-child:after {
    border-left: none;
}
.image-container-split:last-child:after {
    border-right: none;
}
.image-container-split:nth-child(odd):after {
    background-color: red;
    right: -20px;
}
.image-container-split:nth-child(even):after {
    background-color: red;
    left: -20px;
}
.new_container{
  background: blue;
}

.blue{
  background-color: blue;
}
代码语言：javascript
复制
<section id="latest_news">
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
      <!-- content goes here -->
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ex aspernatur praesentium iste ratione nesciunt consectetur animi, temporibus, commodi quibusdam, nemo assumenda provident nam vel? Necessitatibus sint sit illum atque.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split">
        </div>
        <div class="image-container-split">
        </div>
      </div>
    </div>
  </div>
  
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
            <!-- content goes here -->
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi expedita, fugiat deleniti sit quos in accusamus laboriosam! Nulla rerum vero sunt accusamus. Suscipit nesciunt reiciendis est repudiandae sunt modi.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split blue">
        </div>
        <div class="image-container-split blue">
        </div>
      </div>
    </div>
  </div>
  <div class="new_container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque corrupti voluptatibus sapiente optio modi veritatis eveniet corporis deleniti aspernatur dolores atque doloribus alias, laborum officiis quod consectetur! Possimus magni, officiis.
  </div>
</section>

​

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

https://stackoverflow.com/questions/44071380

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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