带有三角形侧向箭头的分隔盒 - 透明与边框

设计师为我制作了一个新的网站设计，但我被困在某个设计元素中。它涉及一个人们可以点击的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

带有三角形侧向箭头的分隔盒 - 透明与边框

回答

相关问题