左边的透明箭头内部

Question

我试图在一个元素上添加一些css3样式，基于图像模型。

里面透明的箭头左边的蓝色边框：

Link to image

有可能只用CSS3？

Answer 1

你能做到这一点我必须去工作，希望这种帮助

<div>Lorem Ipsum</div> 

风格的单个元素：

div{ 
     width:200px; 
     height:60px; 
     margin:100px; 
     background-color:transparent; 
     color:black; 
     position:relative; 
     text-indent:30px; 
     line-height:60px; 
     box-shadow:inset 20px 0 0 200px white; 
     overflow:hidden; 
     -webkit-box-shadow: inset -164px 0 0 20px white; 
     -moz-box-shadow: inset -164px 0 0 20px white; 
     box-shadow: inset -164px 0 0 20px white; 
    } 
    div:before{ 
     content: ''; 
    position: absolute; 
    left: 0px; 
    top: 4px; 
    width: 14px; 
    border-bottom: 3px solid blue; 
    border-left: 3px solid blue; 
    height: 18px; 
     background-color:white; 
    -webkit-transform: skew(0deg,34deg); 
     -moz-transform: skew(0deg,34deg); 
    transform: skew(0deg,34deg); 
    } 
    div:after{ 
    content: ''; 
    position: absolute; 
     background-color:white; 
    left: 0px; 
    bottom: 4px; 
    width: 14px; 
    border-top: 3px solid blue; 
    border-left: 3px solid blue; 
    height: 18px; 
    -webkit-transform: skew(0deg,-34deg); 
     -moz-transform: skew(0deg,-34deg); 
    transform: skew(0deg,-34deg); 
    } 
    body{ 
     background-color: #EEEEEE; 
     khtml-background-size: 10px 10px; 
    -webkit-background-size: 10px 10px; 
    -moz-background-size: 10px 10px; 
    -ms-background-size: 10px 10px; 
    -o-background-size: 10px 10px; 
    background-size: 10px 10px; 
    background-image: -khtml-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); 
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
     width:100%; 
     height:100%; 

    } 

Answer 2

背景不牢固，这使得它非常困难。 特别是因为你的箭头不是90度，所以我猜不会那么平滑。 但是看看这个问题：

CSS triangle custom border color

Answer 3

使用创建与申报单的透明边框三角形的技术。 两次尝试，可能你有点帮助，

HTML

<div class="button"> 
    <div class="wrapper"> 
     <div class=" top-side "></div> 
     <div class="arrow-right "></div> 
     <div class="arrow-right2 "></div> 
     <div class="bottom-side "></div> 
    </div> 
</div> 

CSS

.button { 
    width: 400px; 
    background-color:orange; 
} 
.wrapper{ 
    background-color:blue; 
    width:2px; 
} 
.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 15px solid white; 
    position:absolute; 
    z-index:2; 
} 
.arrow-right2 { 
    position:relative; 
    top:-1px; 
    z-index:1; 
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent; 
    border-bottom: 6px solid transparent; 
    border-left: 18px solid blue; 
} 
.top-side { 
    height:7px; 
    width:2px; 
    background-color:blue; 
} 
.bottom-side { 
    height:7px; 
    width:2px; 
    background-color:blue; 
} 

http://jsfiddle.net/FkPYb/2/

还要检查 http://jsfiddle.net/FkPYb/1/

你可能会得到更好的重通过调整他们。

Answer 4

这里被简化@ kougiland的变化。

div { 
    width:200px; 
    height:60px; 
    position:relative; 
    text-indent:30px; 
    line-height:60px; 
} 
div:before{ 
    content: ''; 
    position: absolute; 
    top: 14px; 
    left: 0px; 
    width: 17px; 
    border-bottom: 1px solid blue; 
    border-left: 1px solid blue; 
    -webkit-transform: skew(0deg,60deg); 
    -moz-transform: skew(0deg,60deg); 
    transform: skew(0deg,60deg); 
} 
div:after{ 
    content: ''; 
    position: absolute; 
    left: 0px; 
    bottom: 14px; 
    width: 17px; 
    border-top: 1px solid blue; 
    border-left: 1px solid blue; 
    -webkit-transform: skew(0deg,-60deg); 
    -moz-transform: skew(0deg,-60deg); 
    transform: skew(0deg,-60deg); 
} 

http://jsfiddle.net/fxLeg262/