CSS crosses an element

Question

How can I lay a large cross on an entire element (div)?

I have a page with a message about it - name, dob, address, etc. - and if the person died, I still want to display the contact information (address, phone number, etc.), but I want to put a big cross through it all to show that it should not be used.

I could only think about using an image, but since this element can be different in length and width, I'm not sure how this will work anyway.

Answer 1

You can use :before and :after in conjunction with transformations to place X throughout the div: DEMO

 .container { position: relative; background: gray; padding: 30px; overflow: hidden; //hide overflow of pseudo elements } .container:before, .container:after { position: absolute; content: ''; background: red; display: block; width: 100%; height: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); //center the X vertically and horizontally: left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .container:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } 

Answer 2

In CSS, you can use CSS and SVG:

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='1'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='1'/></svg>"); background-repeat:no-repeat; background-position:center center; background-size: 100% 100%, auto; 

Demo: http://jsfiddle.net/02ffvyeo/

All of this, including the demo, is based on https://stackoverflow.com/a/312944/2/ . This answer draws a colored triangle, this question concerned the cross

Answer 3

Add an absolute positioned div (100% height / width) containing a font with size em, fill it with "X"

 <div class="deceased">X</div> 

Will expand correctly (and save the image callback :) :)

If you don't like the X being cropped by setting its size to very large, you will need javascript to resize it when the div is resized.

Even better, you can add it with the :after pseudo-class and save both the extra div and the "X"

 .deceased:after { content:"X"; position:absolute; left:0px; top:0px; width:100%; height:100%; font-size: 1000px; // adjust this a little though it will be clipped by the div text-align: center; line-height: 100%; overflow: hidden; } 

Or :before .. will place existing content "under"

 .deceased:before { content:"X"; position:absolute; left:0px; top:0px; width:100%; height:100%; font-size: 1000px; // adjust this a little though it will be clipped by the div text-align: center; line-height: 100%; overflow: hidden; } 

UPDATE

I found a way to use only CSS ...

 @media all and (min-width: 50px) { .deceased:before { font-size:0.1em; } } @media all and (min-width: 100px) { .deceased:before { font-size:0.2em; } } @media all and (min-width: 200px) { .deceased:before { font-size:0.4em; } } @media all and (min-width: 300px) { .deceased:before { font-size:0.6em; } } @media all and (min-width: 400px) { .deceased:before { font-size:0.8em; } } and so on .... 

UPDATE 2

And the built-in svg containing the text scales the text to the size of the div ...

 .deceased:before { content: url('data:image/svg+xml;utf8,<svg>....</svg>'); position:absolute; left:0px; top:0px; width:100%; height:100%; overflow: hidden; } 

Answer 4

you can use class in box element. Then through the class add your cross as a background or pseudo-element on top of it, using background-size or width/height for the pseudo-element and absolute positioning above it.

In any case, using the class will help you make a special style for this field; it may even display: none or opacity:0.5; pointer-events:none; , or everything that you think is correct and consistent with the meaning and design of the website.

Answer 5

CSS is not really meant for this kind of thing. The purpose of a div element is to partition html so that you can apply formatting (CSS) to elements in div tags. What you could try is formatting the text to have a line through it.

 <p style="text-decoration: line-through">Name</p> 

Its still readable, but clearly non-existent.