Question

我有一个用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);
}

我可以做些什么来使边框厚度相同？

Answer 1

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

在.trap:before

更改

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

到

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

我刚刚将1px添加到你的v-shadow字段。

[编辑]这是修复的jsfiddle。

Answer 2

您可以尝试将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

Answer 3

试试这个css（并检查codepen demo：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;
  }
}

CSS透视形状边框

3 个答案: