帶邊框的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箭頭

回答

相關問題