html - 带边框的 CSS 箭头

Question

我发现这个 codepen 演示几乎可以满足我的需要 ( http://codepen.io/web-tiki/pen/EaKPMK )。

HTML:

<div class="wrap">

    <div class="arrow"></div>
</div>

CSS:

.wrap {
  position: relative;
  height:150px;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom:3%;
  background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before, .arrow:after {
  content:'';
  position: absolute;
  bottom: 100%;
  width: 100%;
  padding-bottom:inherit;
  background-color: inherit;
}
.arrow:before {
  right: 20%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(75deg);
}
.arrow:after {
  left: 80%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-75deg);  
}

唯一缺少的是，我实际上需要框周围的边框。当我为伪元素添加边框时，倾斜的部分不会产生闭合线。

.arrow:before {
  right: 20%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(75deg);
  border-top: 4px solid #df0000;
  border-right: 30px solid #df0000;
}
.arrow:after {
  left: 80%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-75deg); 

  border-top: 4px solid #df0000;
  border-left: 30px solid #df0000;
}

关于如何使这项工作有任何想法吗？

Answer 1

这是我的解决方案，尽管它插入了一个新元素:<div class="arrow-head">

    .wrap {
      position: relative;
      height:150px;
      overflow: hidden;
      width: 70%;
      margin: 0 auto;
    }
    .wrap img {
      width: 100%;
      height: auto;
      display: block;
    }
    .arrow {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding-bottom:3%;
      background-color: rgba(0, 0, 0, 0.8);
    }
    .arrow:before, .arrow:after {
      content:'';
      position: absolute;
      bottom: 100%;
      width: 100%;
      padding-bottom:inherit;
      background-color: inherit;
    }
    .arrow:before {
      right: 20%;
      -ms-transform-origin: 100% 100%;
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
      -ms-transform: skewX(45deg);
      -webkit-transform: skewX(45deg);
      transform: skewX(75deg);
      border-top: 4px solid #df0000;
      border-right: 30px solid #df0000;
    }
    .arrow:after {
      left: 80%;
      -ms-transform-origin: 0 100%;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -ms-transform: skewX(-45deg);
      -webkit-transform: skewX(-45deg);
      transform: skewX(-75deg); 

      border-top: 4px solid #df0000;
      border-left: 30px solid #df0000;
    }
    .arrow-head {
        position: absolute;
        right: -moz-calc(20% - 30px);
        right: webkit-calc(20% - 30px);
        right: -o-calc(20% - 30px);
        right: calc(20% - 30px);
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 8px solid #df0000;
    }

    <div class="wrap">
        <div class="arrow">
            <div class="arrow-head">
            </div>
        </div>
    </div>