html - 如何在仅使用 css 创建的图像上制作边框

Question

我仅使用 css 创建了一个功能区。现在我想在它周围制作一个 1px 的灰色边框。但是图像的左侧和右侧已经使用 css 边框创建了。这可能吗？

图像应如下所示(您会看到 1 像素的灰色边框):

这是我用来创建图像的 html 和 css:

.yellow-ribbon-top-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 0;
  border-color: #eedc08 transparent transparent transparent;
  float: left;
}

.yellow-ribbon-mid {
  width: 120px;
  height: 30px;
  float: left;
  background-color: #eedc08;
}

.yellow-ribbon-bottom-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 30px 30px;
  float: left;
  border-color: transparent transparent #eedc08 transparent;
}

<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>

Answer 1

您可以使用 skew transformation 来简化代码然后您可以轻松调整边框:

.yellow-ribbon {
   width: 120px;
   height: 30px;  
   margin:20px;
   background-color: #eedc08;
   border:1px solid #000;
   transform:skew(-30deg);
}

<div class="yellow-ribbon">

</div>

---

顺便说一句，如果您想保留实际代码，您可以依赖像这样的伪元素(但我不推荐这个解决方案，因为它使代码变得更加复杂上面我们有一个简单的):

.yellow-ribbon-top-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 0;
  border-color: #eedc08 transparent transparent transparent;
  float: left;
  position: relative;
  top: 1px;
}


/* create border around the left part */

.yellow-ribbon-top-left:before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 32px 32px 0 0;
  border-color: #000 transparent transparent transparent;
  bottom: -1px;
  z-index:-1
}
/* */

.yellow-ribbon-mid {
  width: 120px;
  height: 30px;
  float: left;
  background-color: #eedc08;
  border-top: 1px solid;
  border-bottom: 1px solid;
  position: relative;
}

.yellow-ribbon-bottom-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 30px 30px;
  float: left;
  border-color: transparent transparent #eedc08 transparent;
  position:relative;
  top:1px;
}
/* create border around the right part */

.yellow-ribbon-bottom-right:before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 0 0 32px 32px;
  border-color: transparent transparent #000 transparent;
  top: -1px;
    right: 0;
  z-index:-1
}
/* */

<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>