See attachment

I've circled it in red. What is the design name of this element?


Some people call it an arrow or a caret that enables a slide-out of content or a popup can display some sort of information. In this particular instance it would appear it is for the navigation. Since you tagged this with CSS I included an example of how to create it:

.arrow_box {
    position: relative;
    background: #b34ae5;
.arrow_box:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(179, 74, 229, 0);
    border-left-color: #b34ae5;
    border-width: 30px;
    margin-top: -30px;

Caret question in regards to Boorstrap that might help you: "How is the caret on Twitter Bootstrap constructed?"

  • If you have a gradient (like it seems to have in the picture), you'll have to use an actual element that's rotated and moved around a bit, SVG, or clip-path – Zach Saucier Dec 19 '14 at 0:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.