如何創建自定義形狀

我想用CSS HTML創建這樣的形象自定義形狀：如何創建自定義形狀

我嘗試使用邊界半徑，但它不會保持不變

2017-06-27 Igor Marcondes

顯示我們在工作的代碼片段 –

你的代碼你知道邊界半徑有8個變量，對吧？ –

@Paulie_D - 這個確切的形狀不能用border-radius來完成。曲線是非常具體的 – vsync

你試過border-top-left-radius和border-bottom-left-radius？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div { 
 

 
    padding: 10px; 
 
    background: #1b1bfc; 
 
    border-top-left-radius: 2em; 
 
    border-bottom-left-radius: 2em; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div>test</div> 
 

 
</body> 
 
</html>

來源

2017-06-27 15:25:52 wahdan

嘗試使用：

shape { 

    border-bottom-left-radius: 1em; 
    border-top-left-radius: 1em; 

}

如果你在把CSS該網頁上，而不是一個單獨的CSS樣式表計劃，那麼你應該把上面的內部風格標籤像這樣：

<style> 
shape { 

    border-bottom-left-radius: 1em; 
    border-top-left-radius: 1em; 

} 
</style>

如果你是使用外部樣式表那麼你可以簡單地將它鏈接到文檔的頂部。

來源

2017-06-27 15:36:05 Brxxn

您應該使用SVG爲：

<svg width="173" height="118"> 
 
<g> 
 
    <path id="svg_3" d="m173.00287,117.8624l-86.50198,0l0,0c-47.774,0 -86.49779,1.25536 -86.50191,-58.92873c-0.00412,-60.18451 38.72791,-58.92869 86.50191,-58.92869l86.50198,0l0,117.85742z" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#007fff"/> 
 
</g> 
 
</svg>

但是，您可以編輯你想...
我以前http://editor.method.ac創建它，但你應該probbly使用Adobe Illustrator中，因爲這將是理想的，然後將其保存爲svg格式並將其放入您的代碼中，或者以HTML或CSS的形式存入

來源

2017-06-27 15:46:18 vsync

border-radius每個角落發生值

Border-radius @ MDN

的邊界半徑CSS屬性允許Web作者定義邊框邊角圓潤怎麼是。每個角的曲線使用一個或兩個半徑定義，定義其形狀：圓形或橢圓形。

所以，你可以申請多個值各個角落

div { 
 
    width: 8em; 
 
    height: 4em; 
 
    background: blue; 
 
    margin: 1em auto; 
 
    border-top-left-radius: 6em 1.2em; 
 
    border-bottom-left-radius: 6em 1.2em; 
 
}

<div></div>

來源

2017-06-27 15:55:54

可以實現通過使用border-radius屬性這種效果。你可以閱讀更多關於它here。

注意：形狀將不會像上面公佈的那樣。

.shape { 
 
    background: #0677bd; 
 
    border-radius: 6em 0 0 6em/.8em 0 0 .8em; 
 
    height: 40px; 
 
    width: 50px; 
 
}

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

來源

2017-06-27 16:49:48 hammy

如何創建自定義形狀

回答

相關問題