左侧的内部透明箭头 | 内部透明箭头

本文介绍了左侧的内部透明箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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:

链接到图像

只能使用css3吗?

推荐答案

只需一个元素，您就可以做到这一点，我必须上班，希望能有所帮助

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

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

    }

这篇关于左侧的内部透明箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！