Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

css - Inside transparent arrow on the left

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 ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

    }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...