duhruh · September 2, 2018 05:22
diff --git a/arrow-things.html b/arrow-things.html
 <html>

 <head>
    <style>
        .ribbon-list{
            list-style: none;
        }
        .ribbon-list > li {
            float: left;
            margin-right: 20px;
        }
        .ribbon-list > li > .tail {
            width: 0;
 	        height: 0;
            border:20px solid transparent;
            border-left: 20px solid white;
            position: absolute;
            left: 0;
        }


        .ribbon-list > li > .head {
            width: 0;
 	        height: 0;
            border:20px solid transparent;
            border-left: 20px solid red;
            position: absolute;
            right: -40px;
        }
        .ribbon-list > li{
            height:40px;
            background:red;
            color:#fff;
            position:relative;
            width:200px;
            text-align:center;
            line-height:40px;
        }

        .color-pink {
            background-color: #ffb3ba !important;
            
        }

        .arrow-color-pink {
            border-left-color: #ffb3ba !important;
        }
        
        .color-orange {
            background-color: #ffdfba !important;
            
        }
        .arrow-color-orange {
            border-left-color: #ffdfba !important;
        }
        .color-green {
            background-color: #baffc9 !important;
            
        }
        .arrow-color-green {
            border-left-color: #baffc9 !important;
        }
    </style>
 </head>

 <body>

 <ul class="ribbon-list">
 <li class="color-pink">hello<span class="head arrow-color-pink"></span></li>
 <li class="color-orange"><span class="tail"></span>world<span class="head arrow-color-orange"></span></li>
 <li class="color-green"><span class="tail"></span>again<span class="head arrow-color-green"></span></li>
 </ul>
 </body>
 </html>
	<html>

	<head>
	<style>
	.ribbon-list{
	list-style: none;
	}
	.ribbon-list > li {
	float: left;
	margin-right: 20px;
	}
	.ribbon-list > li > .tail {
	width: 0;
	height: 0;
	border:20px solid transparent;
	border-left: 20px solid white;
	position: absolute;
	left: 0;
	}


	.ribbon-list > li > .head {
	width: 0;
	height: 0;
	border:20px solid transparent;
	border-left: 20px solid red;
	position: absolute;
	right: -40px;
	}
	.ribbon-list > li{
	height:40px;
	background:red;
	color:#fff;
	position:relative;
	width:200px;
	text-align:center;
	line-height:40px;
	}

	.color-pink {
	background-color: #ffb3ba !important;

	}

	.arrow-color-pink {
	border-left-color: #ffb3ba !important;
	}

	.color-orange {
	background-color: #ffdfba !important;

	}
	.arrow-color-orange {
	border-left-color: #ffdfba !important;
	}
	.color-green {
	background-color: #baffc9 !important;

	}
	.arrow-color-green {
	border-left-color: #baffc9 !important;
	}
	</style>
	</head>

	<body>

	<ul class="ribbon-list">
	<li class="color-pink">hello<span class="head arrow-color-pink"></span></li>
	<li class="color-orange"><span class="tail"></span>world<span class="head arrow-color-orange"></span></li>
	<li class="color-green"><span class="tail"></span>again<span class="head arrow-color-green"></span></li>
	</ul>
	</body>
	</html>