Differences

This shows you the differences between two versions of the page.

--- css:arrow_down [2016/07/07 22:03] – created peter
+++ css:arrow_down [2020/07/15 09:30] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ====== CSS - Arrow Down ======
+http://www.cssarrowplease.com/
 <code css>
 .arrow_box {
-	position: relative;
+  position: relative;
-	background: #88b7d5;
+  background: #88b7d5;
-	border: 4px solid #c2e1f5;
+  border: 4px solid #c2e1f5;
 }
 .arrow_box:after, .arrow_box:before {
-	top: 100%;
+  top: 100%;
-	left: 50%;
+  left: 50%;
-	border: solid transparent;
+  border: solid transparent;
-	content: " ";
+  content: " ";
-	height: 0;
+  height: 0;
-	width: 0;
+  width: 0;
-	position: absolute;
+  position: absolute;
-	pointer-events: none;
+  pointer-events: none;
 }
 .arrow_box:after {
-	border-color: rgba(136, 183, 213, 0);
+  border-color: rgba(136, 183, 213, 0);
-	border-top-color: #88b7d5;
+  border-top-color: #88b7d5;
-	border-width: 30px;
+  border-width: 30px;
-	margin-left: -30px;
+  margin-left: -30px;
 }
 .arrow_box:before {
-	border-color: rgba(194, 225, 245, 0);
+  border-color: rgba(194, 225, 245, 0);
-	border-top-color: #c2e1f5;
+  border-top-color: #c2e1f5;
-	border-width: 36px;
+  border-width: 36px;
-	margin-left: -36px;
+  margin-left: -36px;
 }
 </code>