帶有三角形側向箭頭的分隔盒 - 透明與邊框

設計師爲我製作了一個新的網站設計，但我被困在某個設計元素中。它涉及一個人們可以點擊的div，但該框有一個箭頭延伸div的右側。下面你可以找到一張圖片，顯示我的意思。查看圖像在這裏：帶有三角形側向箭頭的分隔盒 - 透明與邊框

目前我已經能夠得到這個結果，但它顯然不一樣。

.arrow_box { 
    position: relative; 
    border: 10px solid #f7941d; 
    background-color: rgba(255,255,255,0.25); 
    width: 400px; 
    h1 { 
     font-size: 60px; 
     margin-left:40px; 
    } 
    &:after, &:before { 
     left: 100%; 
     top: 50%; 
     border: solid transparent; 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     pointer-events: none; 
    } 
    &:after { 
     border-left-color: rgba(255,255,255,0.5); 
     border-width: 106px; 
     margin-top: -106px; 
    } 
    &:before { 
     border-left-color: #f7941d; 
     border-width: 120px; 
     margin-top: -120px; 
    } 
}

Jsfiddle

正如你可以在圖片上看到的背景應該是TRANSPARANT，只有邊界應該是可見的，但遺憾的是我不能讓背景是TRANSPARANT和箭頭伏貼到div。

這裏的任何幫助真的非常感謝！

來源

2016-11-17 Marco Jacobs

入住這answer..it與你相似：http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color – Navnit

你可以使用SVG文件，使邊境作爲CSS中的背景，並將其設置爲拉伸到按鈕的寬度和高度。 –

<div class="arrow_box"> 
    <h1>Offerte Aanvragen</h1> 
</div> 
<div class="arrow"></div>

.arrow { 
    border: { 
    top: 10px solid #f7941d; 
    right: 10px solid #f7941d; 
    } 
    margin: -205px auto auto 324px; 
    transform: rotate(45deg); 
    width: 160px; 
    height: 160px; 
}

的方法有很多，這是一個通過使用transform容易。旋轉div並僅在兩側設置border。

https://jsfiddle.net/Thielicious/15v9r18t/

來源

2016-11-17 12:22:51 Thielicious

帶有三角形側向箭頭的分隔盒 - 透明與邊框

回答

相關問題