在CSS形状周围制作边框 [英] making borders around CSS shapes

问题描述

因此，我在CSS中绘制元素，使用本教程作为指南。我需要一些帮助边框，但。例如，这里是我的一个曲线梯形的代码：

So I'm drawing elements in CSS, using this tutorial as a guide. I need some help with borders, though. For instance, here's my code for a curved trapezoid:

.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的线框，但我已经使用border属性来绘制元素的第一位。

The problem: I want to draw a 1px line border around the foobar element, but I'm already using the border properties to draw the element in the first place.

有简单的方法吗？我的意思是，我必须创建一个阴影元素的形状相同，但略大于foobar元素。

Is there an easy way to do this? My sense is that I'll have to create a shadow element that is the same shape as -- but slightly larger than -- the foobar element.

提前感谢！

推荐答案

.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

这篇关于在CSS形状周围制作边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！