Home/ Questions/Q 8394947
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:10:50+00:00

I have this image (attached). I am not a designer but I do not

  • 0

I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me with this image and turnning into a css equivalent

thanks!

enter image description here

TRIED

<span class="xyz">
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polygon points="0,0 100,0 100,40 0,40 20,20" style="fill:#46b"/>
   </svg>
   text
</span>

Not sure how to add that to my current css
ALSO TRIED

display: block;
clear: both;
width: 70%;
height: 2%;
float:right;
margin-top: -50%;
margin-right: 2%;
border-left: 10px solid transparent;
border-top: 4px solid #546aa4;
border-bottom: 4px solid #546aa4;

Issue with above is that my text has no background anymore… if I use background-color, then I will have to use border-left: 10px solid white, which is not going to look good on different background images as this layer will sit on top on an image.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you have <div class="magic">, you could apply this style:

    .magic { 
    width: 200px; 
    height: 50px; 
}
.magic:before {
    content: '.';
    float: left;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid white;
    border-bottom: 25px solid transparent;
}

    ​Change dimensions to your own taste. This trick is called CSS Triangle.

    jsFiddle Demo

    EDIT: Or a quick demo with a transparent arrow – here you basically use different border colors for the tricky borders and a way to move the arrow to the left – I used position: relative – so the div’s background won’t cover what is underneath.

    • 0