只有邊框的CSS形狀

Question

我發現瞭如何使用CSS創建各種形狀的信息，如梯形和心形;然而，他們是堅實的形狀。有沒有辦法創建一個透明的形狀，如梯形，只顯示輪廓/邊框？

通過製作兩種形狀並將它們重疊，其中一種比另一種更大，可以使其看起來具有這種效果，但只有在形狀背後的背景是純色時纔有效，總是如此。因此，透明度的原因。

有關CSS形狀的示例：link;例如，看三角形。

謝謝。

Answer 1

這通常與邊境技巧做的，那些是不是這個

您需要其他技術，真正有用的。

例如，請參閱本CSS

body { 
    background: linear-gradient(90deg, lightblue, yellow) 
} 

.trapezoid { 
    left: 50px; 
    top: 50px; 
    position: absolute; 
    height: 100px; 
    width: 500px; 
    background-color: transparent; 
} 

.trapezoid:before { 
    content: ''; 
    width: 57%; 
    height: 100%; 
    left: -4%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 3px 0px 3px 3px; 
    -webkit-transform: skewX(-20deg); 
} 

.trapezoid:after { 
    content: ''; 
    width: 59%; 
    height: 100%; 
    right: -4%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 3px 3px 3px 0px; 
    -webkit-transform: skewX(20deg); 
} 

fiddle

基座元件具有背景透明，按您的請求。我已經在身體中設置了一個漸變來驗證它。

的添加2個僞構件中，具有設定的邊界（除內的一個），而歪斜來實現梯形

Answer 2

您可以將背景顏色設置爲透明

background-color：transparent;

Answer 3

這些形狀通常在css中完成的方式是通過邊框操作。當你有一個透明的梯形時，它只是一個矩形，邊框被邊框遮住了。因此，沒有辦法使用統一的邊框並保持相同的形狀。

Answer 4

你目前的代碼是什麼樣的？你應該能夠添加一個邊框到它並且沒有背景顏色。例如：http://jsfiddle.net/tBBkg/

重疊透明形狀（有邊框）：

#square { 
    width: 140px; 
    height: 140px; 
    border: 2px solid blue; 
    position: absolute; 
} 

#circle { 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    border: 2px solid pink; 
} 

也許我不理解正確的問題，在這種情況下，你能澄清？