/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.ace_breakpoint { /* our rectangle */
  width:50px;
  height:16px;
  background-color: #663399;
  position: relative;
}

.ace_breakpoint:after { /*  our pseudo-element */
  content:"";/* required */
  position: absolute; /* takes the 'cap' out off flow */
  top:0; /* stick it to top edge of the sign */
  left:100%; /* push it way overto the right*/
  height:0; /* we're doing this with borders remember */
  width:0;
  border-width: 8px;
  border-style:solid;
  border-color:#663399; /* same as bg of our rectangle */
  /* now we make some of theborders disappear*/
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-right-color:transparent;
}
</style>
</head>
<body>
<div class="ace_breakpoint">

</div>


<script id="jsbin-source-css" type="text/css">.ace_breakpoint { /* our rectangle */
  width:50px;
  height:16px;
  background-color: #663399;
  position: relative;
}

.ace_breakpoint:after { /*  our pseudo-element */
  content:"";/* required */
  position: absolute; /* takes the 'cap' out off flow */
  top:0; /* stick it to top edge of the sign */
  left:100%; /* push it way overto the right*/
  height:0; /* we're doing this with borders remember */
  width:0;
  border-width: 8px;
  border-style:solid;
  border-color:#663399; /* same as bg of our rectangle */
  /* now we make some of theborders disappear*/
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-right-color:transparent;
}</script>
</body>
</html>

## jsbin.gifucenoho.css
.ace_breakpoint { /* our rectangle */
  width:50px;
  height:16px;
  background-color: #663399;
  position: relative;
}

.ace_breakpoint:after { /*  our pseudo-element */
  content:"";/* required */
  position: absolute; /* takes the 'cap' out off flow */
  top:0; /* stick it to top edge of the sign */
  left:100%; /* push it way overto the right*/
  height:0; /* we're doing this with borders remember */
  width:0;
  border-width: 8px;
  border-style:solid;
  border-color:#663399; /* same as bg of our rectangle */
  /* now we make some of theborders disappear*/
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-right-color:transparent;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.ace_breakpoint { /* our rectangle */
	width:50px;
	height:16px;
	background-color: #663399;
	position: relative;
	}

	.ace_breakpoint:after { /* our pseudo-element */
	content:"";/* required */
	position: absolute; /* takes the 'cap' out off flow */
	top:0; /* stick it to top edge of the sign */
	left:100%; /* push it way overto the right*/
	height:0; /* we're doing this with borders remember */
	width:0;
	border-width: 8px;
	border-style:solid;
	border-color:#663399; /* same as bg of our rectangle */
	/* now we make some of theborders disappear*/
	border-top-color:transparent;
	border-bottom-color:transparent;
	border-right-color:transparent;
	}
	</style>
	</head>
	<body>
	<div class="ace_breakpoint">

	</div>


	<script id="jsbin-source-css" type="text/css">.ace_breakpoint { /* our rectangle */
	width:50px;
	height:16px;
	background-color: #663399;
	position: relative;
	}

	.ace_breakpoint:after { /* our pseudo-element */
	content:"";/* required */
	position: absolute; /* takes the 'cap' out off flow */
	top:0; /* stick it to top edge of the sign */
	left:100%; /* push it way overto the right*/
	height:0; /* we're doing this with borders remember */
	width:0;
	border-width: 8px;
	border-style:solid;
	border-color:#663399; /* same as bg of our rectangle */
	/* now we make some of theborders disappear*/
	border-top-color:transparent;
	border-bottom-color:transparent;
	border-right-color:transparent;
	}</script>
	</body>
	</html>