如何在仅css创建的图像上创建边框

Question

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

图像应如下所示（您看到1 px灰色边框）：

这是我用来创建图片的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简化代码，然后您可以轻松调整边框：

＆＃13;

＆＃13;

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

＆＃13;

<div class="yellow-ribbon">

</div>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，如果你想保留你的实际代码，你可以依赖像这样的这样的伪元素（但我强烈建议这个解决方案，因为它使代码更均匀更复杂，我们有一个简单的一个）：

＆＃13;

＆＃13;

.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
}
/* */

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;