CSS - 创建复杂的形状

-3

有什么简单的方法使用CSS来制作这个形状？ CSS - 创建复杂的形状

2016-08-26 Lukáš Unzeitig

使用SVG及其可能你想让它？ –

这是一个骗局，很容易找到一个简单的搜索。之前的研究只是问！ – Stewartside

但另一个发现的解决方案看起来很复杂..为一个div三个div样式。我有很多风格相似的div，但仍然不同，它会有很多代码......因为我正在寻找更简单的东西。 –

您可以使用rotateX()和perspective()像这样创建的形状。

.shape { 
 
    width: 250px; 
 
    height: 70px; 
 
    border: 2px solid black; 
 
    border-top: 1px solid black; 
 
    margin: 50px; 
 
    transform: perspective(10px) rotateX(-2deg); 
 
}

<div class="shape"></div>

来源

2016-08-26 08:47:36

欧，谢谢！这是如此简单，它的工作原理！ –

你是一个足够高的代表用户足够的CSS upvotes知道这应该是一个骗局...... – Stewartside

顺便说一句，有什么办法来限制内部divs的规模..？ I –

是的，它可以做到。看下面的代码。

.shape { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #000; 
 
    margin: 20px 150px; 
 
    position: relative; 
 
} 
 

 
.shape:after { 
 
     content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000000; 
 
    border-bottom: 50px solid #fff; 
 
    border-left: 50px solid #000000; 
 
    border-right: 50px solid #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -99px; 
 
} 
 

 
.shape:before { 
 
     content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000000; 
 
    border-bottom: 50px solid #fff; 
 
    border-left: 50px solid #fff; 
 
    border-right: 50px solid #000000; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -99px; 
 
}

<div class="shape"></div>

来源

2016-08-26 08:46:00 JeetDaloneboy

CSS - 创建复杂的形状

回答

相关问题