Home Ask Login Register

Developers Planet

Your answer is one click away!

Ammar Ajmal February 2016

Arrow with incomplete border

Arrow with incomplete border

How to make this arrow on the left side of a white div. Here is the css that I have tried but it makes only one color border.

.white-box{
        padding: 20px;
    background: #fff;
  }
  .white-box:after,white-box:before{
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .white-box:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #88b7d5;
    border-width: 30px;
    margin-top: -30px;
}
.white-box:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}

Answers


web-tiki February 2016

With an inline svg and a path element it is pretty simple:

svg{
  width:30%; height:auto;
  display:block;
}
<svg viewbox="1 0 5 10">
  <path d="M5 3 V1 L2 5 L5 9 V7" stroke="grey" stroke-width="0.5" fill="#fff"/>
</svg>

Post Status

Asked in February 2016
Viewed 1,894 times
Voted 6
Answered 1 times

Search




Leave an answer


Quote of the day: live life