0

I have to do something similar to the capture (see below) in my website.

I use to do this with Photoshop. But this time I would like to know if this can be done with 3 'div' elements and css.

Update: this one is similar How to make this arrow in CSS only? but mine is vertical.

With this I get the FIRS arrow div:

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 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-top-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

enter image description here

Community
  • 1
  • 1
JPashs
  • 13,044
  • 10
  • 42
  • 65
  • @Praveen Kumar It is similar but mine is vertical. – JPashs May 10 '16 at 16:46
  • If you look into the code used there, it should become clear as to how the code has been generated ;) It points you in the right direction – jbutler483 May 10 '16 at 16:57
  • a **very** quick demo: https://jsfiddle.net/7dvgc4ur/1/ – jbutler483 May 10 '16 at 17:11
  • none of the answers over there are about gradients. is there anything wrong about them ? example http://codepen.io/gc-nomade/pen/reRedw – G-Cyrillus May 10 '16 at 17:11
  • @jbutler483 thanks, that is what I need. I think this post could be useful for other. This is a vertical arrow. Can you just move your comment as an answer so that I can accept it. Thanks. – JPashs May 10 '16 at 19:28

0 Answers0