左邊的透明箭頭內部

我試圖在一個元素上添加一些css3樣式，基於圖像模型。左邊的透明箭頭內部

裏面透明的箭頭左邊的藍色邊框：

Link to image

有可能只用CSS3？

來源

2013-10-08 wandam

[小提琴]（http://jsfiddle.net）代碼 –

小提琴是偉大的，但請用小提琴只*支持*問題，以及相關的代碼添加到實際的問題也是如此。這個問題應該站在它自己的位置，對未來的訪問者有用，不管可能發生什麼，鏈接的圖像，小提琴，網站等。 – Jeroen

告訴我們你到目前爲止嘗試過什麼.. –

enter image description here

你能做到這一點我必須去工作，希望這種幫助

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

    }

來源

2013-10-08 07:57:47

僅使用1個元素，使用方塊陰影擺脫白色背景並生成此背景。好帖子！ +1 – nkmol

背景不牢固，這使得它非常困難。特別是因爲你的箭頭不是90度，所以我猜不會那麼平滑。但是看看這個問題：

CSS triangle custom border color

來源

2013-10-08 07:31:14 Jaap

使用創建與申報單的透明邊框三角形的技術。兩次嘗試，可能你有點幫助，

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/

你可能會得到更好的重通過調整他們。

來源

2013-10-08 07:54:38 melc

這裏被簡化@ 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/

來源

2014-08-15 21:57:57

雖然工作方式不一樣嗎？或者可以使用箱子陰影來完成嗎？ http://jsfiddle.net/fxLeg262/11/ – powerbuoy

左邊的透明箭頭內部

回答

相關問題