chromium/chrome/browser/resources/lens/overlay/post_selection_renderer.html

<style>
  :host {
    /* Variables controlling the rendered post selection */
    --post-selection-corner-width: 4px;
    --post-selection-corner-hitbox-max-size: 40px;
    position: relative;
  }

  #postSelectionScrim {
    background-color: var(--color-scrim);
    height: 100%;
    opacity: 20%;
    transition: opacity cubic-bezier(0.2, 0.0, 0, 1.0) 400ms;
    width: 100%;
  }

  /** Render the selected part of the image again so it appears glowing over
      the scrim */
  #backgroundImageCanvas {
    clip-path: rect(var(--selection-top)
                    calc(var(--selection-left) + var(--selection-width))
                    calc(var(--selection-top) + var(--selection-height))
                    var(--selection-left)
                    round var(--post-selection-cutout-corner-radius));
    height: 100%;
    inset: 0;
    object-fit: contain;
    position: absolute;
    width: 100%;
  }

  #postSelection {
    /* Scrim is rendered here too, so that the rendered screenshot is dark
     * as if it were under the scrim as well. */
    background-color: var(--color-scrim);
    border-radius: var(--post-selection-cutout-corner-radius);
    height: var(--selection-height);
    left: var(--selection-left);
    margin: auto;
    opacity: 5%;
    position: absolute;
    top: var(--selection-top);
    width: var(--selection-width);
  }

  #selectionCorners {
    background-image: paint(post-selection);
    height: calc(var(--selection-height) +
                    (2 * var(--post-selection-corner-width)));
    left: calc(var(--selection-left) - var(--post-selection-corner-width));
    position: absolute;
    top: calc(var(--selection-top) - var(--post-selection-corner-width));
    width: calc(var(--selection-width) +
                   (2 * var(--post-selection-corner-width)));
    z-index: 5; /* Position above words. */
  }

  .corner-hit-box {
    height: 50%;
    max-height: var(--post-selection-corner-hitbox-max-size);
    max-width: var(--post-selection-corner-hitbox-max-size);
    min-height: var(--post-selection-corner-length);
    min-width: var(--post-selection-corner-length);
    pointer-events: all;
    position: absolute;
    width: 50%;
  }

  #topLeft {
    cursor: nw-resize;
    left: 0;
    top: 0;
    transform: translate(-25%, -25%)
  }

  #topRight {
    cursor: ne-resize;
    top: 0;
    right: 0;
    transform: translate(25%, -25%)
  }

  #bottomRight {
    cursor: se-resize;
    bottom: 0;
    right: 0;
    transform: translate(25%, 25%)
  }

  #bottomLeft {
    cursor: sw-resize;
    bottom: 0;
    left: 0;
    transform: translate(-25%, 25%)
  }
</style>
<div id="postSelectionScrim"
    style$="[[getScrimStyleProperties(height, width)]]">
</div>
<div hidden$="[[!hasSelection(height, width)]]">
  <canvas id="backgroundImageCanvas" height="[[canvasPhysicalHeight]]"
      width="[[canvasPhysicalWidth]]"
      style$="height: [[canvasHeight]]px; width: [[canvasWidth]]px;">
  </canvas>
  <!-- This inner postSelection div isn't technically required, but helps make
   testing easier and more readable. -->
  <div id="postSelection"></div>
  <div id="selectionCorners">
    <template is="dom-repeat" items="[[cornerIds]]">
      <div id="[[item]]" class="corner-hit-box"></div>
    </template>
  </div>
</div>