JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<span id="sign-left">
    <span class="square">
        <span class="triangle"></span>
        <span class="sign">Подробнее</span>
    </span>
</span>

CSS

body {background:#0097B6;}

#sign-left {
    display:inline-block;
    position:relative;
    height:48px;
    cursor:pointer;
}
#sign-left .triangle {
    position:absolute;
	width: 0;
	height: 0;
	border-top: 24px solid transparent;
	border-right: 24px solid #FF9712;
	border-bottom: 24px solid transparent;
    margin-left:-24px;
}
#sign-left .square {
    height:48px;
    background:#FF9712;
    margin-left:24px;
    display:inline-block;
}

#sign-left .sign {
    position:relative;
    font-size:13px;
    font-family:sans-serif;
    line-height:48px;
    color:white;
    margin:0 15px 0 -5px;
}

#sign-left:hover .square {
    background:red;
}

#sign-left:hover .triangle {
    border-right-color:red;
}