html - 如何更改div的形状

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        2年前关闭。
                                                                                            
                
        
我想知道如何使用CSS更改div的形状。我对此进行了一些研究，并发现了“偏斜”选项，但是，我所看到的所有示例都没有给出我想要的形状。这是我正在寻找的图像。

最佳答案

有很多不同的方法，学习CSS时最好的办法就是自己尝试。因此，在看下面的方法之前，我建议先看一下这些资源：


How do CSS triangles work?
The Shapes of CSS

.pattern-column {
  position: relative;
  overflow: hidden;
  background: darkgrey;
  width: 60px;
}
.pattern-column div {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid darkgrey;
  border-bottom: 50px solid transparent;
  margin-left: -40px;
  margin-top: -30px;
}
.pattern-column div:nth-child(2n) {
  border-left: 100px solid grey;
  border-right: 0;
  margin-left: 0;
}
.pattern-column div:nth-child(3n) {
  border-right-color: #ccc;
  border-left-color: #ccc;
}

<div class="pattern-column">
  <div></div>
  <div></div>
  <div></div>
</div>

关于html - 如何更改div的形状，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41728050/