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">

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

Answer 2

这是一种方式。我认为这就是你要找的东西

.arrow:before {
 right: 20%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
 transform-origin: 100% 70%;
 -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 3

你需要减少伪元素的值，如 -

DateTimes

所以你的代码看起来像 -

Chart

它看起来像这样 -

Answer 4

我提出了这个解决方案：

HTML：

<div class="bar left"></div><!--
--><div class="arrow-outer">
  <div class="square left"></div>
  <div class="square right"></div>
  <div class="border left"></div>
  <div class="border right"></div>
</div><!--
--><div class="bar right"></div>

的CSS：

*{
  box-sizing: border-box;
}

.bar{
  position: relative;
  vertical-align: top;
  width: 200px;
  height: 35px;
  display: inline-block;
  background-color: #dfdfdf;
  border-top: 4px solid #ff0000;
}
.arrow-outer{
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 35px;
  position: relative;
  overflow: hidden;
}

.square{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  background-color: #dfdfdf;
}

.square.left{
  transform-origin:left top;
  left: 0;
  transform: rotate(30deg);

}

.square.right{
  transform-origin:right top;
  right: 0;
  transform: rotate(-30deg);
}

.border{
  width: 58px;
  height: 4px;
  background-color: #ff0000;
  position: absolute;
  top: 0;
}

.border.left{
  transform-origin:left top;
  left: 0;
  transform: rotate(30deg) skewX(30deg);
}

.border.right{
  transform-origin:right top;
  right: 0;
  transform: rotate(-30deg) skewX(-30deg);
}

这是codepen：

http://codepen.io/swissdoode/pen/OpzEaJ

唯一的问题是，由于旋转和倾斜，“假”边框并没有真正排列到其他边框。它几乎看不到......但

思想？

带有边框的CSS箭头

4 个答案: