body{background:#fff}.page{padding:50px}.arrow{border:0px solid #363636;border-radius:0;background:#363636;color:#fff;margin:0 auto;text-align:center;width:200px}.arrow--1{position:relative}.arrow--1:after,.arrow--1:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;bottom:100%}.arrow--1:after{border-color:#fff0;border-bottom-color:#363636;left:50%;margin-left:-10px;border-width:10px}.arrow--1:before{border-color:#fff0;border-bottom-color:#363636;left:50%;margin-left:-10px;border-width:10px}.arrow--2{position:relative}.arrow--2:after,.arrow--2:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;left:100%}.arrow--2:after{border-color:#fff0;border-left-color:#363636;top:50%;margin-top:-10px;border-width:10px}.arrow--2:before{border-color:#fff0;border-left-color:#363636;top:50%;margin-top:-10px;border-width:10px}.arrow--3{position:relative}.arrow--3:after,.arrow--3:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;top:100%}.arrow--3:after{border-color:#fff0;border-top-color:#363636;left:50%;margin-left:-10px;border-width:10px}.arrow--3:before{border-color:#fff0;border-top-color:#363636;left:50%;margin-left:-10px;border-width:10px}.arrow--4{position:relative}.arrow--4:after,.arrow--4:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;right:100%}.arrow--4:after{border-color:#fff0;border-right-color:#363636;top:50%;margin-top:-10px;border-width:10px}.arrow--4:before{border-color:#fff0;border-right-color:#363636;top:50%;margin-top:-10px;border-width:10px}.arrow--5{position:relative;border:none}.arrow--5:after,.arrow--5:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;top:100%}.arrow--5:after{border-color:#fff0;border-top-color:#363636;left:50%;margin-left:-10px;border-width:10px}.arrow--5:before{border-color:#fff0;border-top-color:#000;left:50%;margin-left:-10px;border-width:10px}.arrow--6{position:relative}.arrow--6:after,.arrow--6:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;margin-top:0;top:0}.arrow--6:after{border-color:#fff0;border-top-color:#f8f8f8;left:50%;margin-left:-10px;border-width:10px}.arrow--6:before{border-color:#fff0;border-top-color:#363636;left:50%;margin-left:-10px;border-width:10px}.arrow--7{position:relative}.arrow--7:after,.arrow--7:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;margin-right:0;right:0}.arrow--7:after{border-color:#fff0;border-right-color:#f8f8f8;top:50%;margin-top:-10px;border-width:10px}.arrow--7:before{border-color:#fff0;border-right-color:#363636;top:50%;margin-top:-10px;border-width:10px}.arrow--8{position:relative}.arrow--8:after,.arrow--8:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;bottom:0;margin-bottom:0}.arrow--8:after{border-color:#fff0;border-bottom-color:#f8f8f8;left:50%;margin-left:-10px;border-width:10px}.arrow--8:before{border-color:#fff0;border-bottom-color:#363636;left:50%;margin-left:-10px;border-width:10px}.arrow--9{position:relative}.arrow--9:after,.arrow--9:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;left:0;margin-left:0}.arrow--9:after{border-color:#fff0;border-left-color:#f8f8f8;top:50%;margin-top:-10px;border-width:10px}.arrow--9:before{border-color:#fff0;border-left-color:#363636;top:50%;margin-top:-10px;border-width:10px}.arrow--10{position:relative;border:none}.arrow--10:after,.arrow--10:before{border:solid transparent;content:" ";display:block;height:0;position:absolute;pointer-events:none;width:0;bottom:0;margin-bottom:0}.arrow--10:after{border-color:#fff0;border-bottom-color:#f8f8f8;left:50%;margin-left:-10px;border-width:10px}.arrow--10:before{border-color:#fff0;border-bottom-color:none;left:50%;margin-left:-10px;border-width:10px}
