1

How can I achieve this angled slash (/) using CSS? It should be responsive and should also have IE 8 support?

Slanted slash

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Md. Faridul Hassan
  • 88
  • 10
  • 2
    Please Edit your question,is not quite clear. – Hbirjand Apr 21 '15 at 05:04
  • 2
    Added the CSS-shapes tag for better categorization, moved the description to the top and removed the "using CSS" from title because CSS is already present as a tag. Coming to the question, while posting code is not always mandatory for a question, it is always better to indicate if you have tried anything and if yes, what problems you had faced with it. – Harry Apr 23 '15 at 07:08

2 Answers2

4

You can use an element and hide the unwanted parts with pseudo elements and borders (which are supported by IE8):

div{
    position:relative;
    width: 100px; height: 100px;
    background: #000;
}
div:before, div:after{
    content: '';
    position: absolute;
}
div:before{
    top: 0; left: 0;
    border-left: 99px solid #fff;
    border-bottom: 99px solid transparent;
}
div:after{
    bottom: 0; right: 0;
    border-right: 99px solid #fff;
    border-top: 99px solid transparent;
}
<div></div>

You can control the slant by changing the border widths on the pseudo elements. For an explanation of how this works, see here: How do CSS triangles work?

Although this can't be implemented over an image or gradient because of the plain color triangles, It can be responsive.

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
0

If you want to use CSS for creating a content, You must use the CSS content property and you must apply it to CSS property with ::before selector. Here is the example 

.number::before {content:"\2215"}
<span class="number">12</span>

The only difference is,you must use ::before with one semicolon for IE8 :before

IE8 Supports both the CSS :before Pseudo selector,and CSS content property.

For the content property,you need to find the specific "slash" that you want,in the Unicode table

Hbirjand
  • 1,945
  • 19
  • 25