Drawing X Marks in HTML Elements with CSS: A Comprehensive Analysis from Simple Text to Advanced Techniques

Introduction and Problem Context

In modern web development, there is often a need to draw simple graphical symbols, such as X-shaped marks (commonly used to indicate close, cancel, or error states), within user interface elements. Traditional approaches rely on image files, but this increases HTTP requests and page load times. CSS, as a stylesheet language, offers various methods for drawing graphics, enabling these visual effects without external resources. Based on a typical Stack Overflow question, this article systematically explores multiple technical solutions for drawing white X marks in an orange square div element using CSS.

Core Method: Text Content Technique

The simplest and most direct method involves using HTML text content combined with CSS styling. In the best answer (Answer 5), developers achieve the desired effect by adding a span element containing the letter "X" inside a div element and applying CSS styles. Below is a rewritten code example:

<div id="orangeBox">
  <span id="x">X</span>
</div>

#orangeBox {
  background: #f90;
  color: #fff;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

The core of this method lies in leveraging CSS font properties: setting color: #fff; displays the text in white, font-size: 2em; adjusts the size, and text-align: center; achieves horizontal centering. To ensure vertical centering, Flexbox layout properties display: flex;, align-items: center;, and justify-content: center; are added. The advantages of this approach include simplicity, minimal code, and excellent compatibility across all modern browsers. However, its limitations include dependence on specific fonts, where the X shape may vary, and difficulty in customizing line thickness or angles.

Extended Techniques: Pseudo-elements and CSS Transforms

To overcome the limitations of the text method, developers can use CSS pseudo-elements (::before and ::after) combined with transform properties to draw X shapes. This method does not rely on text content but instead creates two rectangular elements and rotates them to form an X. Referencing Answer 2 and Answer 3, below is a rewritten code example:

<div class="x-shape"></div>

.x-shape {
  width: 100px;
  height: 100px;
  background-color: #FA6900;
  border-radius: 5px;
  position: relative;
}

.x-shape::before,
.x-shape::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 8px;
  background-color: white;
  top: 50%;
  left: 10%;
  transform-origin: center;
}

.x-shape::before {
  transform: translateY(-50%) rotate(45deg);
}

.x-shape::after {
  transform: translateY(-50%) rotate(-45deg);
}

In this example, the .x-shape div serves as a container with background color and rounded corners. Pseudo-elements ::before and ::after are created via content: ''; and absolutely positioned at the container's center. The key step involves using transform: rotate(45deg); and transform: rotate(-45deg); to rotate the two rectangles by 45 degrees and -45 degrees, forming an X shape. By adjusting width, height, and transform-origin, the size and position of the X can be precisely controlled. This method offers high customizability, supports responsive design (e.g., using percentage units), and does not depend on fonts. However, the code is relatively complex and requires an understanding of CSS positioning and transforms.

Advanced Techniques: CSS Gradients and Unicode Characters

For more advanced applications, CSS gradients (Answer 4) and Unicode characters (Answer 1) provide alternative solutions. The CSS gradient method uses linear-gradient to create diagonal patterns that simulate an X shape, while the Unicode character method directly inserts special characters (e.g., ✖). Below is a rewritten example of the CSS gradient method:

<div class="gradient-x"></div>

.gradient-x {
  width: 100px;
  height: 100px;
  background: 
    linear-gradient(45deg, transparent 40%, white 45%, white 55%, transparent 60%),
    linear-gradient(135deg, #FA6900 40%, white 45%, white 55%, #FA6900 60%);
  border-radius: 5px;
}

This method overlays two linear gradients: one from top-left to bottom-right (45 degrees) and another from top-right to bottom-left (135 degrees), with color transitions at specific percentage points to form an X shape. Its advantages include pure CSS implementation with no additional elements, but the code is less readable, and browser support may be limited (especially in older versions). The Unicode character method is simpler: using content: "\274c"; in CSS to insert a character, but cross-browser compatibility issues must be noted, as some characters may not display in Safari or Chrome.

Technical Comparison and Best Practices

Comparing the above methods, the text content technique (best answer) excels in simplicity and compatibility, making it suitable for quickly implementing basic needs. The pseudo-element and transform technique offers greater customizability, ideal for scenarios requiring precise control or responsive design. CSS gradients and Unicode character methods demonstrate the diversity of CSS but may be limited in practical applications due to compatibility or maintainability. From a performance perspective, all methods are CSS-based with high rendering efficiency, though gradient methods might increase GPU load. In cross-browser testing, text and pseudo-element methods perform best, while Unicode characters require attention to font support.

In actual development, it is recommended to choose a method based on project requirements: for general UI components, prioritize text or pseudo-element techniques; for complex graphics, combine multiple CSS features. For example, the best answer can be extended with hover effects:

#orangeBox:hover {
  background: #e55a00;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

This enhances user experience while keeping the code concise.

Conclusion and Future Outlook

This article systematically analyzes multiple techniques for drawing X-shaped marks with CSS, from simple text methods to advanced pseudo-element and gradient approaches. The text content method provided in the best answer is recommended for its simplicity and high compatibility, while other methods expand the possibilities of CSS in graphic drawing. As CSS standards evolve, future features (e.g., CSS Houdini) may further simplify graphic drawing. Developers should master these core concepts and apply them flexibly in real-world scenarios to create efficient and maintainable web interfaces.