只有邊框的CSS形狀

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

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

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

謝謝。

來源

2013-07-30 saratogahiker

http://stackoverflow.com/questions/8718587/is-it-可能的樣式到梯形 - 這有一些東西非常接近這一點。這可能包含一些適合你的工作。 – TravJenkins

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

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

例如，請參閱本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個僞構件中，具有設定的邊界（除內的一個），而歪斜來實現梯形

來源

2013-07-30 21:11:22 vals

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

background-color：transparent;

來源

2013-07-30 19:23:35 Alen

謝謝，但這種情況在這種情況下不起作用，因爲這些形狀是通過操縱邊界而衍生出來的，並且它是邊框顏色給出形狀的顏色。 [link]（http://css3shapes.com/）有一些很好的例子。 – saratogahiker

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

來源

2013-07-30 19:26:06 Ryan

你目前的代碼是什麼樣的？你應該能夠添加一個邊框到它並且沒有背景顏色。例如：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; 
}

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

來源

2013-07-30 19:28:20

例如，請參閱[link]（http://css3shapes.com/）上的Triangle或Trapezium示例。 – saratogahiker

只有邊框的CSS形狀

回答

相關問題