JSFiddle - React, Tailwind, and code Playground

by cristianromagnoli

HTML

<div>
    <p class="triangle-right right">The entire appearance is created only with CSS.</p>
</div>

CSS

.triangle-right:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #075698 rgba(0, 0, 0, 0);
display: block;
width: 0;
}

.triangle-right.right:after {
top: 16px;
right: -40px;
bottom: auto;
left: auto;
border-width: 15px 0 0 40px;
border-color: rgba(0, 0, 0, 0) #075698;
z-index:1
}

.triangle-right {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #FFF;
background: #075698;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#2E88C4), to(#075698));
background: -moz-linear-gradient(#2E88C4, #075698);
background: -o-linear-gradient(#2E88C4, #075698);
background: linear-gradient(#2E88C4, #075698);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.triangle-right.right {
margin-right: 40px;
background: #075698;
}

div{
    background-color:#000;
    position:relative;
    z-index:-2
}