Inside transparent arrow on the left

Question

I'm trying to add some css3 styles on an element, basing on an image model.

Inside transparent arrow on the left with blue border:

Link to image

It is possible only with css3 ?

Answer 1

with a single element you could do this i have to go to work hope this help

<div>Lorem Ipsum</div> 

the style:

   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

The background is not solid which makes it very hard. Especially since your arrow is not 90 degrees, which won't render that smooth I guess. But have a look at this question:

CSS triangle custom border color

Answer 3

Using the technique of creating triangles with transparent borders of divs. Two attempts that might help you a bit,

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/

also check http://jsfiddle.net/FkPYb/1/

You might get better result by tweaking them.

Answer 4

Here is simplified variation of @kougiland's.

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/