[SOLVED] CSS cross through an element

CSS cross through an element

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.

Solution

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>