html - CSS 透视形状边框

Question

我有一个用 CSS 制作的梯形。我遇到的问题是底线的线条粗细。我尝试在形状周围添加实心边框，但底线仍然薄了几个像素。

这是显示梯形的 fiddle :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);
}

如何才能使周围的边框厚度相同？

Answer 1

说实话，我不太确定这是如何运作的

在.trap:之前

改变

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

到

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

我刚刚向你的 v-shadow 字段添加了 1px。

[编辑] 这是 jsfiddle修复。