JSFiddle - React, Tailwind, and code Playground

by Ishan Khare

HTML

<div id="container">
    <div id="rectangle">
        <p>3D CSS Ribbon</p>
    </div>
    <div id="triangle2" class="triangle">
    </div>
    <div id="triangle1" class="triangle">
    </div>
    <div id="content">
        <p>box enclosed in ribbon</p>
    </div>
</div>

CSS

.triangle {
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
    z-index:-5;
    position : absolute;
    top : 100px;
}

#triangle1 {
    border-color: transparent rgba(0,100,100,0.5) transparent transparent;
    left : -15px;
}

#triangle2 {
    border-color: transparent transparent transparent rgba(0,100,100,0.5);
    left : 246px;
    visibility : hidden;
}

#rectangle{
    height : 50px;
    transition : width 0.5s ease;
    width : 200px;
    background-color : rgba(0,150,150,1);
    border-top-right-radius : 3px;
    border-bottom-right-radius : 3px;
    box-shadow : 2px 2px 5px 0px;
    z-index : 5;
    position : relative;
    top : 65px;
}

#rectangle p{
    position : absolute;
    margin-top : 10px;
    margin-left : 20px;
    color : white;
    font-style : italic;
    font-size : 25px;
}

#rectangle:hover {
    transition : width 0.3s ease-out;
    width : 260px;
}

#rectangle:hover+#triangle2 {
    transition : visibility 0.5s ease 0.5s;
    visibility : visible;
}

#content {
    border-radius : 5px;
    border-style : solid;
    border-width : 1px;
    border-color : white;
    box-shadow : 0px 0px 3px 0px;
    position : relative;
    top : -10px;
    left : 15px;
    width : 230px;
    height : 300px;
}

#content p {
    margin-top : 100px;
    margin-left : 20px;
    text-shadow : 0px 0px 3px rgba(0,150,150,1);
    color : grey;
    font-size : 20px;
}

#container {
    position : absolute;
    top : -20px;
}