Home/Explore/

Popover arrow

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<div style="
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);

    /* Used to position the arrow */
    position: relative;
">
    <!-- The content -->
    ...

    <!-- Top left arrow -->
    <div style="
        /* Position at the top left corner */
        left: 32px;
        position: absolute;
        top: 0px;

        /* Border */
        background-color: #FFF;
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Top center arrow -->
    <div style="
        /* Position at the top center */
        left: 50%;
        position: absolute;
        top: 0px;

        /* Border */
        background-color: #FFF;
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Top right arrow -->
    <div style="
        /* Position at the top right corner */
        position: absolute;
        right: 32px;
        top: 0px;

        /* Border */
        background-color: #FFF;
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Right top arrow -->
    <div style="
        /* Position at the right top corner */
        position: absolute;
        right: 0;
        top: 32px;

        /* Border */
        background-color: #FFF;
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(50%, 50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Right center arrow -->
    <div style="
        /* Position at the right center */
        position: absolute;
        right: 0;
        top: 50%;

        /* Border */
        background-color: #FFF;
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Right bottom arrow -->
    <div style="
        /* Position at the right bottom corner */
        bottom: 32px;
        position: absolute;
        right: 0;

        /* Border */
        background-color: #FFF;
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Bottom left arrow -->
    <div style="
        /* Position at the bottom left corner */
        bottom: -16px;
        position: absolute;
        left: 32px;

        /* Border */
        background-color: #FFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Bottom center arrow -->
    <div style="
        /* Position at the bottom center */
        bottom: -16px;
        position: absolute;
        left: 50%;

        /* Border */
        background-color: #FFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Bottom right arrow -->
    <div style="
        /* Position at the bottom right corner */
        bottom: -16px;
        position: absolute;
        right: 32px;

        /* Border */
        background-color: #FFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Left top arrow -->
    <div style="
        /* Position at the left top corner */
        left: 0;
        position: absolute;
        top: 32px;

        /* Border */
        background-color: #FFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(-50%, 50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Left center arrow -->
    <div style="
        /* Position at the left center */
        left: 0;
        position: absolute;
        top: 50%;

        /* Border */
        background-color: #FFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />

    <!-- Left bottom arrow -->
    <div style="
        /* Position at the left bottom corner */
        bottom: 32px;
        left: 0;
        position: absolute;

        /* Border */
        background-color: #FFF;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%) rotate(45deg);

        /* Size */
        height: 16px;
        width: 16px;
    " />
</div>

Related patterns

Arrow buttons

Tooltip

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!