css

SS is an art and it needs some practice to master it.

In this section we explain a simpler way to make css based triangles. These triangles can be used for styling the edges. Using rotation css property might be extra helpful for styling.

HTML

<div class="info-tab tip-icon" title="html">
     
</div>

CSS

.tip-icon::before {
        width: 0;
        height: 0;
        content: "";
        display: inline-block;
        position: absolute;
        left: 1px;
        bottom: -20px;
        border-top: 50px solid red;
        border-right: 50px solid green;
        border-bottom: 50px solid blue;
        border-left: 50px solid orange;
    }

Now simply make the triangle transparent that you don't want. For example to disappear blue triangle change its css to:

border-bottom: 50px solid transparent;

Preview

tri

HTML
CSS
Preview