Question

所以我在CSS中绘制元素using this tutorial as a guide。不过，我需要一些边界帮助。例如，这是我的曲线梯形代码：

.foobar {
  height: 0px;
  width: 140px;
  position: relative;
  border-bottom: 200px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-left-radius: 150px 70px;
  border-bottom-right-radius: 100px 25px;
}

问题：我想在foobar元素周围绘制1px线条边框，但我已经在使用边框属性来绘制元素。

有一种简单的方法吗？我的感觉是，我将不得不创建一个与foobar元素形状相同但略大于foobar元素的阴影元素。

提前致谢！

Answer 1

您可以使用稍微调整的尺寸来定位：伪元素。

.foobar, .foobar:before {
  height: 0px;
  width: 140px;
  position: relative;
  border-bottom: 200px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-left-radius: 150px 70px;
  border-bottom-right-radius: 100px 25px;
}
.foobar:before {
  content: "";
  display:block;
  position: absolute;
  left: -31px;
  top: -1px;
  width: 142px;
  z-index: -1;   
  border-bottom: 202px solid black;

  /* add these lines if you're a pixel perfectionist */
  border-bottom-left-radius: 150px 71px;
  border-bottom-right-radius: 100px 26px;
}

http://jsfiddle.net/4vNGL/2

Answer 2

您可以使用相同规则后面绘制的伪元素，并且缩放比例很小。

.foobar, .foobar:before {

  height: 0px;
  width: 140px;
  position: relative;
  border-bottom: 200px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-left-radius: 150px 70px;
  border-bottom-right-radius: 100px 25px;
  position:relative;
}
.foobar:before {
  content:'';
  position:absolute;
  display:block;
  z-index:-1;
  top:0;
  left:-30px;
  width: 140px;
  -webkit-transform-origin:center;
  -webkit-transform:scale(1.03);/* adapt here the width of your fake border */
  transform-origin:center;
  transform:scale(1.03);
  border-bottom: 200px solid black; /* color of fake border */
}

http://codepen.io/gc-nomade/pen/eDIGJ

您甚至可以同时使用两个伪元素并添加一些阴影：http://codepen.io/gc-nomade/pen/axmsc

围绕CSS形状制作边框

2 个答案: