CSS arrow example

Sometimes you need to wrap your content into some wrapper. Quick example. You need draw customer feedback on your web app and need their "Speech" wrap into cloud object or so. See the example below.



One of the methods I discovered and often use is the following arrow:




.arrow {
position: relative;
background: #d528c4;
}
.arrow:after {
right: 100%;
top: 50%; border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(213, 40, 196, 0);
border-right-color: #d528c4;
border-width: 15px;
margin-top: -15px;
}

.arrow {
position: relative;
background: #d528c4;
width: 200px;
}

.arrow:after {
right: 100%;
top: 50%; border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(213, 40, 196, 0);
border-right-color: #d528c4;
border-width: 15px;
margin-top: -15px;
}

.arrow h3 {
padding: 30px;
color: #fff;
}




<div class="arrow">
<h3>This is your wrapped text into arrow</h3>
</div>


In short, this is about:
#css
#web development

Start discussion:
Related articles: