如何使用CSS实现文稿编辑标记（NOT及红色箭头）

Hey there! Great news—you absolutely can create those "NOT" labels and red arrows using just CSS. Let’s walk through each element step by step with simple, easy-to-follow examples that you can tweak to fit your poster design.

Creating the "NOT" Label #

The easiest way to add a "NOT" label without cluttering your HTML is using CSS pseudo-elements (::before or ::after). These let you insert content directly from your stylesheet, which is perfect for overlaying labels like this.

Here’s a quick example:

<div class="poster-element">Original Text</div>

.poster-element {
  position: relative; /* Needed to position the pseudo-element relative to this box */
  padding: 1rem;
  border: 1px solid #000;
  display: inline-block;
}

.poster-element::before {
  content: "NOT"; /* The text we want to display */
  position: absolute;
  top: -10px; /* Adjust to move it up/down */
  right: -10px; /* Adjust to move it left/right */
  background-color: #fff;
  color: #ff0000;
  border: 2px solid #ff0000;
  padding: 0.2rem 0.5rem;
  font-weight: bold;
  border-radius: 4px;
  font-size: 0.8rem;
}

This will place a red-outlined "NOT" label in the top-right corner of your element. You can tweak the top, right, background-color, and other properties to match your poster’s style.

Adding the Red Arrow #

For the red arrow, we can use CSS borders to create a triangle shape (a common trick for arrows) or use clip-path for more complex shapes. Let’s start with the border method since it’s straightforward.

Method 1: Border-Based Arrow #

This uses transparent borders to form a triangle:

<div class="red-arrow"></div>

.red-arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #ff0000; /* This creates the arrow point */
}

To make it point in a different direction, just adjust which border is colored. For example, border-right would make it point left, border-bottom would point up, etc.

Method 2: Positioning the Arrow Next to an Element #

If you want the arrow to point at your poster element, combine positioning with the arrow:

<div class="poster-container">
  <div class="poster-element">Original Text</div>
  <div class="red-arrow"></div>
</div>

.poster-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.red-arrow {
  /* Same arrow styles as above */
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #ff0000;
}

This will place the arrow next to your element, pointing towards it. You can also use absolute positioning if you need the arrow to be placed in a specific spot relative to the poster.

Putting It All Together #

Here’s a combined example with both the "NOT" label and arrow:

<div class="poster-container">
  <div class="poster-element">Original Text</div>
  <div class="red-arrow"></div>
</div>

.poster-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem;
}

.poster-element {
  position: relative;
  padding: 1.5rem;
  border: 2px solid #000;
  font-size: 1.2rem;
  background-color: #f9f9f9;
}

.poster-element::before {
  content: "NOT";
  position: absolute;
  top: -12px;
  right: -12px;
  background: #fff;
  color: #ff0000;
  border: 2px solid #ff0000;
  padding: 0.3rem 0.6rem;
  font-weight: bold;
  border-radius: 6px;
}

.red-arrow {
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 24px solid #ff0000;
}

You can adjust all the values (sizes, colors, positions) to match the exact look you want for your poster.

Don’t worry if it takes a bit of tweaking—CSS positioning and pseudo-elements take a little practice, but these examples give you a solid starting point.

内容的提问来源于stack exchange，提问作者Michael Gburski