How can I put a big cross over an entire (div) element?
I have a page with a person's details on it - name, dob, address, etc. - and if the person is deceased I still want to display the contact details (address, phone number, etc.) but want to put a big cross through it all to show that it shouldn't be used.
I could only really think of using an image, but as the element could be varying in length and width I'm not sure how that would work anyway.
You could use :before
and :after
in combination with transforms to put an X over the entire 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);
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in massa at leo pretium ultricies. Nam cursus ultricies nisl sit amet aliquet. Vestibulum tristique, lectus sed tempor feugiat, augue purus tempor erat, viverra ullamcorper turpis nulla
ut nunc. Praesent a ante at dui ultrices eleifend id tempus erat. Pellentesque vitae eleifend felis. Donec tellus tellus, aliquet at adipiscing et, adipiscing et lacus. Morbi vitae commodo metus.
</div>