css arrow with box tutorial

css arrow with box tutorial

February 16, 2015

css (cssarrowplease)

.arrow_box {
 position: relative;
 background: #88b7d5;
 border: 4px solid #c2e1f5;
}

.arrow_box:after, .arrow_box:before {
 right: 100%;
 top: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

 .arrow_box:after {
 border-color: rgba(136, 183, 213, 0);
 border-right-color: #88b7d5;
 border-width: 30px;
 margin-top: -30px;
}

.arrow_box:before {
 border-color: rgba(194, 225, 245, 0);
 border-right-color: #c2e1f5;
 border-width: 36px;
 margin-top: -36px;
}

Comments