html - how to add background image to css3 arrow -


For a project, I must include the background image in a css3 arrow (right to face). Below is HTML / CSS What I want to achieve is that the image extends from the rectangular box to the triangular (border) box.

Enter image details here

HTML:

  & lt; div id = "arrow" & gt; & Lt; / Div & gt;   

CSS: # Arrow {width: 128px; Height: 100 pixels; Background color: #FFF; Border: 1px solid # 999; Status: Relative; Background image: URL (http://upload.wikimedia.org/wikipedia/commons/3/32/Bee-apis.jpg); } # Arrow: {After content: ''; Status: Completed; Top: 0 pixels; Left: 128 pixels; Width: 0; Height: 0; Border: 50px solid transparent; Border-left: 12px solid # f0f0f0; } # Arrow: {Before content: ''; Status: Completed; Top: 0 pixels; Left: 12 9px; Width: 0; Height: 0; Border: 50px solid transparent; Border-left: 12px solid # 999; }

How do you cope with this problem? I'm not compatible with IE7 / 8/9 that there is no problem using the code.

Not sure that you want to do something difficult, but it's your

p> You can use SVG to draw a path.

  & lt; Svg id = "svg-defs" & gt; & Lt; Defs & gt; & Lt; Clippath id = "clip-triangle" & gt; & Lt; Polygon numeral = "0,0 150,0 300,150 150,300 0,300,0,0" /> & Lt; / clipPath & gt; & Lt; / Defs & gt; & Lt; / Svg & gt;    

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -