GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Popover arrow

HTML

<div class="popover-arrow">
<!-- The content -->
...

<!-- Top left arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--tl"></div>

<!-- Top center arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--tc"></div>

<!-- Top right arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--tr"></div>

<!-- Right top arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--rt"></div>

<!-- Right center arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--rc"></div>

<!-- Right bottom arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--rb"></div>

<!-- Bottom left arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--bl"></div>

<!-- Bottom center arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--bc"></div>

<!-- Bottom right arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--br"></div>

<!-- Left top arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--lt"></div>

<!-- Left center arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--lc"></div>

<!-- Left bottom arrow -->
<div class="popover-arrow__arrow popover-arrow__arrow--lb"></div>
</div>

CSS

.popover-arrow {
/* Border */
border: 1px solid #d1d5db;

/* Used to position the arrow */
position: relative;
}

.popover-arrow__arrow {
/* Size */
height: 0.5rem;
width: 0.5rem;

background-color: #fff;
position: absolute;
}

.popover-arrow__arrow--tl {
/* Position at the top left corner */
left: 1rem;
top: 0;

/* Border */
border-left: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translate(50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--tc {
/* Position at the top center */
left: 50%;
top: 0;

/* Border */
border-left: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translate(-50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--tr {
/* Position at the top right corner */
right: 1rem;
top: 0;

/* Border */
border-left: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translate(-50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--rt {
/* Position at the right top corner */
right: 0;
top: 1rem;

/* Border */
border-right: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translate(50%, 50%) rotate(45deg);
}

.popover-arrow__arrow--rc {
/* Position at the right center */
right: 0;
top: 50%;

/* Border */
border-right: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translate(50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--rb {
/* Position at the right bottom corner */
bottom: 1rem;
right: 0;

/* Border */
border-right: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translate(50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--bl {
/* Position at the bottom left corner */
bottom: -0.5rem;
left: 1rem;

/* Border */
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
transform: translate(50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--bc {
/* Position at the bottom center */
bottom: -0.5rem;
left: 50%;

/* Border */
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
transform: translate(-50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--br {
/* Position at the bottom right corner */
bottom: -0.5rem;
right: 1rem;

/* Border */
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
transform: translate(-50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--lt {
/* Position at the left top corner */
left: 0;
top: 1rem;

/* Border */
border-bottom: 1px solid #d1d5db;
border-left: 1px solid #d1d5db;
transform: translate(-50%, 50%) rotate(45deg);
}

.popover-arrow__arrow--lc {
/* Position at the left center */
left: 0;
top: 50%;

/* Border */
border-bottom: 1px solid #d1d5db;
border-left: 1px solid #d1d5db;
transform: translate(-50%, -50%) rotate(45deg);
}

.popover-arrow__arrow--lb {
/* Position at the left bottom corner */
bottom: 1rem;
left: 0;

/* Border */
border-bottom: 1px solid #d1d5db;
border-left: 1px solid #d1d5db;
transform: translate(-50%, -50%) rotate(45deg);
}
Demo
Follow me on and to get more useful contents.