带边框的CSS箭头

我发现这个codepen演示几乎可以满足我需要（http://codepen.io/web-tiki/pen/EaKPMK）。带边框的CSS箭头

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

任何想法如何使这项工作？

来源

2017-02-22 Swissdude

你确定要倾斜元素吗？如果是，那么这可能会帮助你：http://www.cssarrowplease.com/ – Krunal

我已经看过这个页面。不过，它只是产生90°角的箭头。我的箭头需要有一个灵活的角度，所以这就是我选择偏斜版本的原因。 – Swissdude

还没有时间来彻底检查你的CodePen，但你可能会发现在这个线程的答案有帮助 - http://stackoverflow.com/questions/36782245/css-triangular-cutout-with-border-and-transparent-gap/36786984＃。也许很有可能调整你的笔来获得你所需要的东西。我只是给你一个可能有帮助的链接。 – Harry

这是我的解决方案，虽然它插入一个新的元素：<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>

来源

2017-02-22 10:15:03 artemisian

哇 - 这看起来不错 - 我会试一试...谢谢！ – Swissdude

这里是一个way.i认为这是你在找什么

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

来源

2017-02-22 10:11:42 Edison

您需要降低伪元素的值，例如 -

.arrow:after {left:49%}

所以你的代码会被看喜欢 -

.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: 50%; 
    padding-bottom:inherit; 
    background-color: inherit; 
} 
.arrow:before { 
    right: 50%; 
    -ms-transform-origin: 100% 100%; 
    -webkit-transform-origin: 100% 100%; 
    transform-origin: 100% 100%; 
    -ms-transform: skewX(45deg); 
    -webkit-transform: skewX(45deg); 
    transform: skewX(45deg); 
    border-right:10px solid red; 
    border-top:10px solid red; 
} 
.arrow:after { 
    left: 49%; 
    -ms-transform-origin: 0 100%; 
    -webkit-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
    transform: skewX(-45deg); 
    border-left:10px solid red; 
    border-top:10px solid red; 
}

它看起来就像这样 -

来源

2017-02-22 10:34:34

我已经试过了 - 但箭头并没有真正加入底部。它仍然平坦......无论如何感谢您的努力...... – Swissdude

我想出了这个解决方案：

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

唯一的问题是，该«假»边界并不真正排队到其他边界，因为的旋转和skewX。它几乎看不见，但...

想法？

来源

2017-03-19 08:50:25 Swissdude

带边框的CSS箭头

回答

相关问题