使用CSS3在框中繪制右彎曲的邊框

Question

如何使用CSS3在此圖中在邊框中繪制右邊框？

Answer 1

一種可能的解決方案是

 #curve{ margin:0 auto; position:relative; width:50px; height:50px; border-top:1px solid red; border-right:1px solid red; border-top-right-radius:50px; float:left; margin-left:50px; } #curve:after{ content: ""; position: absolute; width: 50px; height: 50px; border-bottom: 1px solid red; border-left: 1px solid red; border-bottom-left-radius: 50px; left: 50px; top: 50px; } 

 <div id="curve"></div> 

Answer 2

SVG是創建此類形狀的更好選擇。 它簡單且可擴展。

我們可以使用SVG的path元素創建此形狀，並用一些顏色，漸變或圖案填充它。

僅一個屬性d用於定義路徑元素中的形狀。 該屬性本身包含許多短命令和少量參數，這些命令才起作用。

以下是創建此形狀的必要代碼：

<path d="M10,10
         L210,10
         Q230,10 250,50
         T290,90
         L10,90
         Z" />

我在path元素內使用了5個命令。 以下是簡要說明：

• M命令用於定義起點。 它出現在開始處，並指定應從其開始的點。

• L命令用於繪制直線。

• Q命令用於繪制曲線。

• T會產生與先前相同類型的曲線，但是如果它遵循另一個Q指令或T指令。
• Z命令用於關閉當前路徑。

輸出：

工作示例：

 body { background: linear-gradient(#466273, #5c8ea8) no-repeat; min-height: 100vh; margin: 0; } 

 <svg width="300" height="100" viewBox="0 0 300 100"> <path d="M10,10 L210, 10 Q230,10 250,50 T290,90 L10,90 Z" stroke="#000" stroke-width="2" fill="yellowgreen" /> </svg> 

---

有用的資源：

• SVG： 規范 ， MDN