JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="rectangle">
							<h2 class="dropdown-toggle" data-toggle="dropdown">
								Cart <i class="icon-shopping-cart"></i> <b class="caret"></b>
							</h2>
							<ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0">
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sign in </a></li>
								<li role="presentation"><a rolw="menuitem" tabindex="-1" href="#">View Cart</a></li>
							</ul>
    <!-- Ribbon side-fold (left and right) -->
						<div class="triangle-l triangle-left-pos"></div>
						<div class="triangle-r triangle-right-pos"></div>
						</div>

CSS

.rectangle {
	background: none repeat scroll 0 0 #de8a03;
	float: left;
	height: 32px;
	left: -15px;
	position: relative;
	top: 0;
	z-index: 2;
}


.rectangle  h2 {
	font-size: 14px;
	color: #ffffff;
	margin-top: 10px;
	text-align: center;
}

.triangle-l {
	border-color: transparent #332619 transparent transparent;
	border-style: solid;
	border-width: 10px;
	height: 0;
	position: absolute;
	width: 0;
	z-index: 1;
}


.triangle-r {
	border-color: transparent transparent transparent #332619;
	border-style: solid;
	border-width: 10px;
	height: 0;
	position: absolute;
	width: 0;
	z-index: 2;
}

.triangle-left-pos {
	left: -5px;
	top: 20px;
}


.triangle-right-pos {
	right: -10px;
	top: -10px;
}