Arrow at the bottom of a container with CSS
An ignorant mind is precisely not a spotless, empty vessel, but one that’s filled with the clutter of irrelevant or misleading life experiences, theories, facts, intuitions, strategies, algorithms, heuristics, metaphors, and hunches that regrettably have the look and feel of useful and accurate knowledge. This clutter is an unfortunate by-product of one of our greatest strengths as a species. We are unbridled pattern recognizers and profligate theorizers. Often, our theories are good enough to get us through the day, or at least to an age when we can procreate. But our genius for creative storytelling, combined with our inability to detect our own ignorance, can sometimes lead to situations that are embarrassing, unfortunate, or downright dangerous—especially in a technologically advanced, complex democratic society that occasionally invests mistaken popular beliefs with immense destructive power (Dunning, 2014).
Dunning, D. (2014, October 27). We Are All Confident Idiots. Pacific Standard. https://psmag.com/social-justice/confident-idiots-92793
HTML
<div class="demo-arrow">Demo Arrow</div>
CSS
.demo-arrow {
position: relative;
background: #222222;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
}
.demo-arrow:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #222222;
}
