Overscan calibration UI.

chrome/browser/resources/options/chromeos/display_options.css

Index: chrome/browser/resources/options/chromeos/display_options.css
diff --git a/chrome/browser/resources/options/chromeos/display_options.css b/chrome/browser/resources/options/chromeos/display_options.css
index 7ca9880659c1e969227a239cd21e71d59cb895dc..5518f7caf12a28556486d2e8442f07bdbf9013b4 100644
--- a/chrome/browser/resources/options/chromeos/display_options.css
+++ b/chrome/browser/resources/options/chromeos/display_options.css
@@ -102,3 +102,35 @@ html[dir=rtl] #selected-display-data-container {
 .display-options-button {
   width: 120px;
 }
+
+#display-overscan-calibration-arrow-container {
+  background: transparent;
+  border: none;
+  position: absolute;
+  z-index: 3;
+}
+
+/* The small arrows to denote the overscan calibration mode.  The triangular
+ * arrows are achieved by css border. */
+.display-overscan-calibration-arrow {
+  border: 10px solid transparent;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.display-overscan-arrow-to-top {
+  border-bottom-color: rgb(64, 64, 64);
+}
+
+.display-overscan-arrow-to-left {
+  border-right-color: rgb(64, 64, 64);
+}
+
+.display-overscan-arrow-to-bottom {
+  border-top-color: rgb(64, 64, 64);
+}
+
+.display-overscan-arrow-to-right {
+  border-left-color: rgb(64, 64, 64);
+}