如何創建具有不規則形狀的div

Question

我只想問是否可以創建帶有CSS的不規則形狀的div。我已經搜索過，但我找不到一個好例子。風格是這樣的:(抱歉不能上傳圖像）。

  /
      /     \ 
      /      \ 
     /      \ 
      /___________________________\  

有應該是連接它的頂部線。基本上它在左右側有不同的高度。

這將是真正有用的示例代碼。

Answer 1

THE WAY SVG

既然你要求的形狀是不可能的，只有CSS，我建議你使用SVG繪製形狀。

下面一段代碼將創建以下形狀：

<svg height="150" width="150"> 
    <polygon points="20,10 100,30 120,100 0,100" style="fill:red;" /> 
</svg> 

SVG是一個功能強大的工具，使形狀否則不可能不使用的圖像。請閱讀here。

---

CSS回答

這可以通過使用perspective和transform來完成。您創建兩個div：一個將獲得perspective，另一個將被轉換。只要知道.test -div中的任何內容都會被轉換，所以如果你在那裏放置文本，它也會被轉換。

HTML

<div class="wrapper"> 
    <div class="test"></div> 
</div> 

CSS

.wrapper { 
    width: 100px; 
    height: 100px; 
    margin-left: 100px; 
    -webkit-perspective: 150px; /* Chrome, Safari, Opera */ 
    perspective: 150px; 
} 

.test { 
    height: 100px; 
    width: 100px; 
    background: red; 
    -webkit-transform: rotateX(45deg); 
    /* Chrome, Safari, Opera */ 
    transform: rotateX(45deg); 
} 

結果

JSFIDDLE

Answer 2

它後面的鑽石，讓周圍的方式旋轉它，你會得到你的形狀：

#diamond-shield { 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-bottom: 20px solid red; 
    position: relative; 
    top: -50px; 
} 

#diamond-shield:after { 
    content: ''; 
    position: absolute; 
    left: -50px; top: 20px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-top: 70px solid red; 
} 

Answer 3

這也可以使用CSS clip-path

div { 
 
    width: 200px; 
 
    height: 150px; 
 
    background: red; 
 
    -webkit-clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%); 
 
    clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%); 
 
}

<div></div>

完成

您可以那麼只需要更改背景元素，如果你需要一個圖像。

div { 
 
    width: 200px; 
 
    height: 150px; 
 
    background: url(http://lorempixel.com/200/150/); 
 
    -webkit-clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%); 
 
    clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%); 
 
}

<div></div>

在其當前狀態，剪輯路徑沒有被廣泛支持的內聯或進口SVG但它是一個更清潔，而且在某些情況下，更容易變種使用。

• Browser Support

Answer 4

您可以嘗試使用溢出隱藏和變換，但最好的辦法將是SVG。

HTML

<div class="out"> 
    <div class="in"></div> 
</div> 

CSS

body { background:url(http://www.placecage.com/g/640/480) } 
.out { 
    height: 100px; 
    width: 150px; 
    transform-origin: 0% 100%; 
    transform: skew(-10deg); 
    overflow: hidden; 
} 
.in { 
    height: 110px; 
    width: 148px; 
    position: relative; 
    left: -43px; 
    top: -7px; 
    transform-origin: 0% 0%; 
    transform: skew(30deg) rotate(10deg); 
    background: rgba(9,40,0,0.8); 
    transition: 0.5s ease; 
} 
.in:hover { 
    background: rgba(50,0,70,0.7); 
    transition: 0.5s ease; 
} 

FIDDLE：https://jsfiddle.net/xb1jxd7g/