CSS透視形狀邊框

我有一個用CSS製作的梯形。我遇到的問題是底線的線條粗細。我已經嘗試在形狀周圍添加一個堅實的邊框，但底線仍然是幾個像素更薄。CSS透視形狀邊框

這裏的小提琴顯示梯形：http://jsfiddle.net/d7fuaur1/

.trap { 
    width: 436px; 
    height: 150px; 
    position: absolute; 
    padding: 0px; 
    left: 100px; 
    text-transform:uppercase; 
    text-align:center; 
    padding-top:25px; 
    padding-bottom:25px; 
    top: 20px; 
} 

.trap:before { 
    content: ""; 
    position: absolute; 
    border-radius: 2px; 
    box-shadow:0 0 0px 4px #000; 
    top: -4%; bottom: -11%; left: -3%; right: -3%; 
    -webkit-transform: perspective(50em) rotateX(-30deg); 
    transform: perspective(50em) rotateX(-30deg); 
}

我能做些什麼，以獲得邊框厚度相同各地？

來源

2014-09-27 mango

呃......透視投影使遠處的物體看起來比靠近觀察者的物體更小。 – 2014-09-27 16:11:47

@Cicada啊，是的，這是有道理的。所以我想沒有修復？有沒有更好的代碼可以用來製作像我的jsfiddle中的那樣的梯形？ – mango 2014-09-27 16:13:31

說實話，我我不完全確定這是如何工作的

在.trap:before

變化

box-shadow:0 0 0px 4px #000;

到

box-shadow:0 1px 0px 4px #000;

我剛纔添加1px的到你的V-shadow字段。

[編輯]這是修復的jsfiddle。

來源

2014-09-27 16:26:05

這個工程！謝謝！ – mango 2014-09-27 17:16:04

你可以嘗試添加border: <size> solid <color>到.trap：前

.trap:before { 
     content: ""; 
     position: absolute; 
     border-radius: 2px; 
     box-shadow:0 0 0px 4px #000; 
     top: -4%; bottom: -11%; left: -3%; right: -3%; 
     z-index: ; 
    -webkit-transform: perspective(50em) rotateX(-30deg); 
     transform: perspective(50em) rotateX(-30deg); 
     border: 5px solid black; 
    }

Updated Fiddle

來源

2014-09-27 16:14:30 nabeelaa

謝謝，但我正在尋找使邊框在整個形狀周圍具有相同的厚度。正如你所看到的，底線還是比頂端還要薄一些。 – mango 2014-09-27 16:17:06

哦，我看到..你有沒有試過這個網站http://css-tricks.com/examples/ShapesOfCSS/ – nabeelaa 2014-09-27 16:18:13

試試這個CSS（並檢查codepen演示：http://codepen.io/ChrisPlz/pen/vjkeq）

div { 
    border-top:80px solid #C1C1C1; 
    border-left:45px solid transparent; 
    border-right:45px solid transparent; 
    padding:0 8px 0 0; 
    height:0; 
    width:120px; 
    position: relative; 
    margin: 2em auto; 
    &:before { 
    border-top:90px solid #000; 
    border-left:50px solid transparent; 
    border-right:50px solid transparent; 
    padding:0 8px 0 0; 
    height:0; 
    width:130px; 
    position: absolute; 
    top: -85px; 
    left: -55px; 
    content: ""; 
    z-index: -1; 
    } 
}

來源

2014-09-27 16:17:52

CSS透視形狀邊框

回答

相關問題