How to make image style as arrow

newcoder1010 · April 7, 2016

Hi,

I like to pick any image and then make it like an arrow with white background. I tried paint, snagit, snipping tool. I could not do it. If please help. Should I use tool or I can do it using css.

Many thanks.

musicman · April 7, 2016

Hi,

you can use CSS content property.

img:before {
    content: url(arrow.gif);
}

newcoder1010 · April 8, 2016

Thanks but sorry I am not able to follow it.

Html:

<div class="region region-footer">
    
<section id="block-block-15">

  <p><a href="http://www.teksolusion.com/" target="_blank"> 

      <img src="sites/default/files/tek%20solusion%20logo.png" alt="teksolusion.com"><br></a>  
</p>

</section>
  </div>

What would be the css for the image I have? Below did not work.

   .region-footer  img:before {
    content: url("sites/default/files/tek%20solusion%20logo.png");
}

Please help.

musicman · April 8, 2016

Hi,

how the result looks like? is the injected image showed up?

note: the url on the "content" property should linked to the "arrow" image, not to the same image ( tek%20solusion%20logo.png ).

dsonesuk · April 8, 2016

This can be done using css3 transform: rotate() using background-image or img element for modern browsers only. Using image editing graphics program you can remove corners by making transparent, then save as gif (low file size but not as sharp), png (can be larger file size, but better transparency results, and sharper result), and being image can be used for modern, and less mordern browsers.

newcoder1010 · April 11, 2016

musicman - I dont know how to make arrow image. my goal is to make the arrow image.

Dsonesuk - I was able to follow rotate part. I am lost after that. Sorry. Please advise.

My Page: http://godrupal.info/shalomhomesolutions/?q=node/112

Please scroll to bottom. You will see i have form then each side i have one image. Please see the design how i want to make the region.

http://godrupal.info/shalomhomesolutions/sites/default/files/Untitled_3.png

Form css which stays in the middle. Should i put this form on top of two images and apply css to make arrow on this form instead of images?

#block-webform-client-block-53 { padding-top: 77px; background:white; z-index:1; }

  .region-footer2  img {
width:100%;
    height: 550px;
    background-color: red;
    /* Rotate div */
    -ms-transform: rotate(27deg); /* IE 9 */
    -webkit-transform: rotate(27deg); /* Chrome, Safari, Opera */
    transform: rotate(27deg);
  }

Thanks.

Edited April 11, 2016 by newcoder1010

dsonesuk · April 11, 2016

If you are going to use edited images, why rotate them? IF you want to use css to produce the same effect, you rotate the parent container element, this will produce the pointer effect with white top and bottom left corners, the image or background image element within the rotated parent rotates also, so this needs to to be reverse rotated to make it horizontal again.

The left one is easier you can use borders to reproduce that effect using content: or html element see https://css-tricks.com/snippets/css/css-triangle/ then its just a matter of overlaying image and positioning to the right of image.

musicman · April 11, 2016

musicman - I dont know how to make arrow image. my goal is to make the arrow image.

Hi,

You can clip an image to svg path like following:

CSS

img { clip-path: url( #svgTextPath ); }

HTML

 <img alt="dog" src="dog.jpg" />
 <svg height="0" width="0">
 <defs>
 <clipPath id="svgTextPath">
 <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1" />
 </clipPath>
 </defs>
</svg>

It will insert the img to the svg path and the path will crop the img.

But I suggest to have an individual arrow image in png and then use the CSS content property.

newcoder1010 · April 11, 2016

I did not know what i was doing. So I though I should apply css to image to make arrow.

This is new to me. I am doing arrow-left first. This code is from css tricks.

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}

Now, I am trying to apply css to the form in the middle. I just applied css to the form:

I took the above arrow left code and placed inside the block located between two images:

#block-webform-client-block-53 {
    /* padding-top: 77px; */
    background: #EAE7E7;
    z-index: 1;
    padding-right: 145px;
    /* width: 200px; */
    /* height: 0; */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 100px solid #F0F0F1;
}

I am lost. Could please help me placing this two arrows both sides of the form? I am just eager to fix it.

dsonesuk · April 11, 2016

The svg option seem better, it can be more fluid than using borders, which you cant use percentage values, and difficult to use rotation and make fluid, also.

newcoder1010 · April 12, 2016

Musicman - "But I suggest to have an individual arrow image in png and then use the CSS content property." Not understanding. I dont know how i can take my regular image and then make it arrow.

First I created html block:

<img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" />  // THIS IS JUST REGULAR SIZE IMG.
 <svg height="0" width="0">
 <defs>
 <clipPath id="svgTextPath">
 <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1" />
 </clipPath>
 </defs>
</svg>

CSS:

#block-block-35 img { clip-path: url( #svgTextPath ); }

It did not work. Things are getting more complicated. If you could help, it will be great.

Edited April 12, 2016 by newcoder1010

musicman · April 13, 2016

Hi, can you share the page where the svg path added?

newcoder1010 · April 14, 2016

http://godrupal.info/shalomhomesolutions/?q=node/112

Please scroll to bottom. If you inspect in google chrome, you will see code:

<section id="block-block-35" class="block block-block clearfix">

      
  <p> <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png"><br>
     <svg height="0" width="0"></svg><br>
     <defs><br><clippath id="svgTextPath"></clippath></defs></p>
     <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1"></polygon><br><br>
</section>

CSS:

#block-block-35 img {    clip-path: url(#svgTextPath );}

newcoder1010 · April 14, 2016

I have one image on the left. I have one image on the right. I have a form in the middle.

My goal is to make it similar to this:

http://godrupal.info/shalomhomesolutions/sites/default/files/Untitled_3.png

Not sure whether I apply css to the form or css to the images.

Ingolme · April 14, 2016

If it never changes, it might be best to just modify it in Photoshop rather than try to code it.

dsonesuk · April 14, 2016

Its already been established the op is apparently incapable of doing this, and so here we are with alternative methods.

musicman · April 14, 2016

Hi,
this is from the page source:

<section id="block-block-33" class="block block-block col-md-2 clearfix"> <p> <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" /><br /><svg height="0" width="0"><br /><defs><br /><clippath id="svgTextPath"></clippath></defs></svg></p> <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1"></polygon><br /><br /> </section>

<section id="block-block-35" class="block block-block clearfix">      
  <p> <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" /><br /><svg height="0" width="0"><br /><defs><br /><clippath id="svgTextPath"></clippath></defs></svg></p>
<polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1"></polygon><br /><br />
</section>

The polygon is part of the SVG, put it in the defs tag like so:

<img alt="dog" src="dog.jpg" />
 <svg height="0" width="0">
 <defs>
 <clipPath id="svgTextPath">
 <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1" />
 </clipPath>
 </defs>
</svg>

and where the clip-path CSS is? clip-path works in Mozilla (have no idea with Chrome). I attached the script that worked.

If it's still doesn't work, like dsonesuk said, some alternative methods would be great.

clip path css - 2.html

dsonesuk · April 16, 2016

It does not work for chrome, unless you use a svg image tag, which in turn breaks the fluidity of using svg.

The only way i could get this to work by using image tag is to completely rethink this and make them part of form section background and force them out either side of form using position absolute with left/right properties.

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>

            .arrows {display: inline-block;position:absolute;top: 0; font-size: 0;overflow: hidden;}

            .image_left_arrow {
                left: -660px;
            }

            .image_right_arrow {

                right: -1220px
            }

            .image_left_arrow rect, .image_left_arrow image {
                -webkit-clip-path:url( #image_left_arrow_svg );
                clip-path: url( #image_left_arrow_svg );
            }
            .image_right_arrow rect, .image_right_arrow image {
                -webkit-clip-path:url( #image_right_arrow_svg );
                clip-path: url( #image_right_arrow_svg );
            }


            .arrows > svg, .image_right_arrow rect, .image_right_arrow image, .image_left_arrow rect, .image_left_arrow image {
                width: 100%;
            }

            .arrows > svg, .image_right_arrow rect, .image_right_arrow image, .image_right_arrow, .image_left_arrow rect, .image_left_arrow image, .image_left_arrow {
                height: 100%;
                min-height: 535px;
            }

            .footer2 .region-footer2 {
                overflow: hidden;
            }

            /*SET DIMENSIONS */



            .image_right_arrow, .image_left_arrow {
                width: 1370px; /*required for chrome matching width set in element rect and image*/
            }

            /* RESET current css styling of website */
            .webform-component-textarea {
                /**/ clear: both;
            }

            #block-webform-client-block-53 {
                position: relative;


            }

            #block-webform-client-block-53 form {
                position: relative;
                z-index: 20;
            }

            .footer1 section {margin:0; padding: 10px; }
            .footer2{
                /*margin: 0 15px;  optional */
            }
            .footer2 section {position: relative; z-index: 20;}

            .footer2 section h3 {color: #fff; text-shadow: 2px 2px 5px #000;}

            #block-webform-client-block-53 {border: none; padding: 0 15px;}

            #block-webform-client-block-53, #block-webform-client-block-53 form { background: none repeat scroll 0 0 #eae7e7; z-index: 10;}

            #block-webform-client-block-53 form { margin-top:10px;}
            #block-block-33 {background:none; padding: 0 15px;}
        </style>

    </head>
    <body>
        <div class="footer1">
            <div class="region region-footer1">

                <section class="block block-block copyright col-md-12 col-xs-12 col-sm-12 clearfix" id="block-block-9">


                    <p><br>Copyright 2015 Shalom Home Solutions. All Rights Reserved.</p>

                </section>
            </div>
        </div>
        <div class="footer2">
            <div class="region region-footer2">
                <section id="block-block-33" class="block block-block col-md-4 clearfix">
                    <h3 class="hidden-sm hidden-xs">Left Side of Footer</h3>
                </section>
                <section id="block-webform-client-block-53" class="block block-webform col-md-4 clearfix">

                    <h2 class="block-title">Free Estimate</h2>

                    <form class="webform-client-form webform-client-form-53" enctype="multipart/form-data" action="/shalomhomesolutions/?q=node/112" method="post" id="webform-client-form-53" accept-charset="UTF-8"><div><div  class="CallMe_Name_R form-item webform-component webform-component-textfield webform-component--name webform-container-inline form-group">
                                <label class="control-label" for="edit-submitted-name">Name </label>
                                <input class="CallMe_Name_C form-control form-text" type="text" id="edit-submitted-name" name="submitted[name]" value="" size="60" maxlength="50" />
                            </div>
                            <div  class="CallMe_Phone_R form-item webform-component webform-component-textfield webform-component--phone webform-container-inline form-group">
                                <label class="control-label" for="edit-submitted-phone">Phone </label>
                                <input class="CallMe_Phone_C form-control form-text" type="text" id="edit-submitted-phone" name="submitted[phone]" value="" size="9" maxlength="9" />
                            </div>
                            <div  class="form-item webform-component webform-component-textfield webform-component--email form-group">
                                <label class="control-label" for="edit-submitted-email">Email </label>
                                <input class="form-control form-text" type="text" id="edit-submitted-email" name="submitted[email]" value="" size="60" maxlength="25" />
                            </div>
                            <div  class="form-item webform-component webform-component-textarea webform-component--message form-group">
                                <label class="control-label" for="edit-submitted-message">Message </label>
                                <div class="form-textarea-wrapper resizable"><textarea class="form-control form-textarea" id="edit-submitted-message" name="submitted[message]" cols="60" rows="5"></textarea></div>
                            </div>
                            <input type="hidden" name="details[sid]" />
                            <input type="hidden" name="details[page_num]" value="1" />
                            <input type="hidden" name="details[page_count]" value="1" />
                            <input type="hidden" name="details[finished]" value="0" />
                            <input type="hidden" name="form_build_id" value="form-RaFsqq5ymnbbEwbBqfcUqVD9jhAUb2fRdQ5AT22swW0" />
                            <input type="hidden" name="form_id" value="webform_client_form_53" />
                            <div class="form-actions"><button class="webform-submit button-primary btn btn-default form-submit" type="submit" name="op" value="Contact Me">Contact Me</button>
                            </div></div></form>
                    <svg  height="0" width="0">
                    <defs>
                    <clipPath  id="image_left_arrow_svg" clipPathUnits="objectBoundingBox">
                        <polygon points="0 0,.43 0,.31 .5,.43 1,0 1,0 1" style="fill:none; stroke:white; stroke-width:1" />
                    </clipPath>
                    </defs>
                    </svg>

                    <div class="arrows image_left_arrow">
                        <svg>
                        <rect fill="#ffffff" fill-opacity="0.0"  width="1370" height="100%" />
                        <image width="1370" height="100%"  xlink:href="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" />
                        </svg>
                    </div>


                    <svg height="0" width="0">
                    <defs>
                    <clipPath  id="image_right_arrow_svg" clipPathUnits="objectBoundingBox">
                        <polygon points="1 1,.28 1,.16 .5,.28 0,1 0,1 0" style="fill:none; stroke:white; stroke-width:1" />
                    </clipPath>

                    </defs>
                    </svg>


                    <div class="arrows image_right_arrow">
                        <svg>
                        <rect width="1370" height="100%" fill="#ffffff" fill-opacity="0.0" />
                        <image width="1370" height="100%" xlink:href="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png"/>
                        </svg>
                    </div>
                </section>
                <!--<section id="block-block-34" class="block block-block col-md-6 clearfix">




                </section>-->
                <section id="block-block-35" class="block block-block clearfix col-md-4">
                    <h3 class="hidden-sm hidden-xs">Right Side of Footer</h3>
                </section>
            </div>
        </div>
        <div class="footer1">
            <div class="region region-footer1">

                <section class="block block-block copyright col-md-12 col-xs-12 col-sm-12 clearfix" id="block-block-9">


                    <p><br>Copyright 2015 Shalom Home Solutions. All Rights Reserved.</p>

                </section>
            </div>
        </div>
    </body>
</html>

newcoder1010 · April 16, 2016

Thank you so much. It is lot complicated than I thought. I will have to take my time and try your code later. For now, I will not even think about the arrow image. I have to come up with something easier. I just saved your code. Thank you so much again for your time.

How to make image style as arrow

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in