1

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 ?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
wandam
  • 162
  • 1
  • 2
  • 11
  • 2
    [fiddle](http://jsfiddle.net) your code – Mohsen Safari Oct 08 '13 at 07:27
  • 2
    A fiddle is great, but please use a fiddle only to *support* a question, and add the relevant code to the actual question too. The question should stand on itself and be useful to future visitors no matter what may happen to linked images, fiddles, sites, etc. – Jeroen Oct 08 '13 at 07:30
  • Show us what you have tried so far.. – Joke_Sense10 Oct 08 '13 at 07:31
  • related : http://stackoverflow.com/questions/23758922/transparent-css-arrow-triangle-over-an-image – web-tiki Nov 04 '14 at 17:12

4 Answers4

5

enter image description here

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%;

    }
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • 1
    Only using 1 element, using box shadow to get rid of the white background and generating this background. Great post! +1 – nkmol Oct 08 '13 at 08:10
0

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

Community
  • 1
  • 1
Jaap
  • 1,079
  • 10
  • 11
0

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.

melc
  • 11,523
  • 3
  • 36
  • 41
0

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/

Ryan Beymer
  • 1
  • 2
  • Doesn't work the same way though? Or could it be done using box-shadow? http://jsfiddle.net/fxLeg262/11/ – powerbuoy Jul 26 '16 at 13:41